DIV CSS 佈局教程網

需求：有時候，當頁面內容較短，撐不開浏覽器高度，但是又希望footer能在窗口最低端。

思路：footer的父層的最小高度是100%，footer設置成相對於父層位置絕對（absolute）置底（bottom：0），父層內要預留footer的高度。

html代碼：

1. <!-- 父層 -->     
2. <div id="wapper">     
3.     <!-- 主要內容 -->     
4.     <div id="main-content">     
5.     </div>     
6.     <!-- 頁腳 -->     
7.     <div id="footer">     
8.     </div>     
9. </div>     

CSS如下：

1. #wapper{     
2.     position: relative;   /*重要！保證footer是相對於wapper位置絕對*/     
3.     height: auto;          /* 保證頁面能撐開浏覽器高度時顯示正常*/     
4.     min-height: 100%  /* IE6不支持，IE6要單獨配置*/     
5. }     
6. #footer{     
7.    position: absolute;  bottombottom: 0; /* 關鍵 */     
8.    left:0; /* IE下一定要記得 */     
9.    height: 60px;         /* footer的高度一定要是固定值*/     
10. }     
11. #main-content{     
12.    padding-bottom: 60px; /*重要！給footer預留的空間*/     
13. }     

這時候，其它浏覽器上都能正常顯示了，但是IE 6要另外處理：

1. <!--[if IE 6]->     
2. <style>     
3. #wapper{height:100%;} /* IE在高度不夠時會自動撐開層*/     
4. </style>     
5. <![endif]-->     

以上這篇html的footer置於頁面最底部的簡單實現方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。