頁面內容不足一屏時顯示在這一屏的最下方
阿新 • • 發佈：2019-02-08
有時候，當頁面內容較短，撐不開瀏覽器高度，但是又希望footer能在視窗最低端。
思路一：將footer的父級元素的最小高度設定為100%，並相對定位；父級元素內要預留footer的高度；並將footer的絕對定位（absolute），置底（bottom:0）;
HTML
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div CSS
html, body { margin: 0; padding: 0; height: 100%; }
#container { min-height: 100%; position: relative; }
#header { background: #ff0; padding: 10px; }
#body { padding-top: 10px; padding-bottom: 40px; }
#footer { position: absolute; bottom: 0; width: 100%; height: 40px; background: #6cf; }效果圖：
思路二：將html和body設定為100%；然後就可以在100%的高度中通過padding給header、footer空出兩部分空白區域，再通過給header設定等同於自身高度的負值margin-bottom，給footer設定等同於自身高度的負值margin-top，就完美的把兩者移回可見區域，如此以來，既滿足content部分不滿一屏時footer在底部，又滿足了，超過一屏時footer被撐開的需求。
HTML：
<body>
<header>
header
</header>
<section class CSS：
html, body { height: 100%; }
header { height: 60px; margin-bottom: -60px; background: #1381cc; color: #FFF; position: relative; }
section { background: #fff; min-height: 100%; padding: 60px 0 60px; }
footer { height: 60px; margin-top: -60px; background: #0c4367; color: #FFF; }效果圖：
