css把底部footer固定在頁面底部

看完這篇文章後決定用第三個方法，其實很想用jq的，方便靈活，諮詢了好多老前輩後，得知Js控制DOM在效能上影響比較大，能用css和html解決就不要用js了。
HTML

代碼如下

複製代碼

<div id="container"> <div>.........</div> &nbsp; <div class="push"><!-- not put anything here --></div> </div> &nbsp; <div id="footer">Footer Section</div> CSS html, body{     height: 100%;     margin:0;     padding:0; } #container {     min-height: 100%;     height: auto !important;     height: 100%;     margin: 0 auto -330px;/*margin-bottom的負值等於footer高度*/ } .push, #footer {     height: 330px;     clear:both; }

html和body標籤：html,body標籤和前兩種方法一樣，需要設定“height:100%”並重設“margin”和“padding”為0；
div#container:方法三關鍵區段就在於div#container的設定，首先需要設定其最小高度（min-height）為100％,為了能相容好IE6，需要對min-height進行相容處理（具體處理方法看前面或代碼）另外這裡還有一個關鍵點在div#container容器上需要設定一個margin-bottom，並且給其取負值，而且值的大小等於div#footer和div.push的高度，如果div#footer和div.push設定了padding和border值，那麼div#container的margin-bottom負值需要加上div#footer和div.push的padding和border值。也就是說“div#container{margin-bottom:-[div#footer的height+padding+border]或者-[div.push的height+padding+border]}”。一句話說：div#container的margin-bottom負值需要和div#footer以及div.push的高度一致（如果有padding或border時，高度值需要加上他們）；
div.push:在div.push中我們不應該放置任何內容，而且這個div必須放置在div#container容器中，而且是最底部，並且需要設定其高度值等於div#footer的值，最好加上clear:both來清除浮動。div.push容器在此處所起的作用就是將footer往下推。
div#footer容器：div#footer容器和方法二一樣，不能放到div#container內部，而和div#container容器同級，如果需要設定元素和footer之間的間距，最好使用padding來代替margin值。