讓網頁的頁尾始終待在最下方

html和body的高度並不一定相同，在內容少的時候，body的高度要小於html，當然這隻會出現在body中的內容所佔的空間高度小於瀏覽器的視口高度的時候，此時html的高度大於body的高度。網頁中的元素都是以body最為參考，所以有必要保持html和body的高度相同。

html,body{height:100%;}

第一種方法：
在body中使用兩個容器，包括網頁的頁尾和另外一部分（container）。設定container的高度為100%；頁尾部分使用 負外邊距 保持其總是在最下方。

html, body {height:100%;}.fl {float:left;display:inline;}#container {width:100%;height:300px;overflow:hidden;height:100%;border-bottom:70px #FFFFFF solid;}.aside {width:30%;}.article {width:70%;}#footer {height:50px;width:100%;clear:both;margin-top:-50px;border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;}

<div id="container"><div id="header"><div><img src="" width= height= alt="" />        <div>        <p>fddfv</p>            <p>容量：<span>24M</span>/<span>2G</span></p>        </div></div></div><div class="aside fl"> dsfcndsjkcnsd</div>    <div class="article fl">cdsklcmdskcmkdslcmksdlckldsmcskl</div></div><div id="footer">footer</div>

第二種方法：使用絕對位置

同樣需要保持html和body的高度相同，並且body需要添加另外的一些樣式，footer需要使用絕對位置

body{position:relative;height:auto !important;height:100%;min-height:100%;}

html {height:100%;}body {margin:0;padding:0;position:relative;height:auto !important;height:100%;min-height:100%;text-align:center;}.fl {float:left;display:inline;}#header {width:100%;height:80px;}#container {width:100%;height:300px;overflow:hidden;border-bottom:#FFFFFF 60px solid;}.aside {width:30%;}.article {width:70%;}#footer {height:50px;position:absolute;width:100%;clear:both;bottom:0;left:0;border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;}

<div id="header"><div><img src="" width= height= alt="" />        <div>        <p>fddfv</p>            <p>容量：<span>24M</span>/<span>2G</span></p>        </div></div></div><div id="container" style="border-bottom:#FFFFFF 60px solid;"><div class="aside fl"> dsfcndsjkcnsd</div>    <div class="article fl">cdsklcmdskcmkdslcmksdlckldsmcskl</div></div><div id="footer">footer</div>

第一種方式，不論內容佔據的空間相對瀏覽器視口多高，瀏覽器側面的捲軸總是會出現。第二種則使用了 ！importent，但是側面的捲軸旨在需要的時候出現。兩種方法的共同點是都有一個比footer高度相等或稍大的下邊距。