1 <div class="header"><div class="main"></div></div> 2 <div class="container"><div class="main"></div></div> 3 <div class="footer"><div class="main"></div></div>
如果主體內容過短不足以支撐瀏覽器時，footer會上移，非常影響頁面，算是一個大bug了，搜過很多種方法現整理一下footer固定在第的若干種方法，供以后參考。（歡迎大家積極補充。）
以上布局為給個人寫頁面常用。
注：.main{
width:1050px;
margin:0 auto;
height:auto;
}
1、這是剛剛使用過的css,可以達到效果，只是不論瀏覽器的大小如何footer均會在底，主體內容則以滾動條形式顯示。
缺點：小分辨率下達不到好的視覺體驗，主體以滾動條顯示，不合格
.footer{
position:fixed;
bottom:0;
left:0;
}
2、
目前用的是這種，經試驗可以滿足需要
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>footer需要固定在底部</title> 6 <style type="text/css"> 7 html,body{font-size: 14px;font-family: "微軟雅黑";text-align: center;width: 100%;height: 100%;min-height: 100%;border:0;line-height: none;} 8 p{border: 0;margin: 0;padding: 0;line-height: none;} 9 body{padding:0px; margin:0px ;} 10 .container{position:relative;height: auto;min-height: 100%;margin: 0} 11 .container .header{height: 100px;background: #0000FF;} 12 .container .push{padding-bottom: 100px;} 13 .footer{position:relative;height: 100px;margin-top:-100px;background: #0000FF;} 14 15 </style> 16 </head> 17 <body> 18 <div class="container"> 19 <div class="header"> 20 <p>頭部文本</p> 21 </div> 22 <div class="content"> 23 <p>主體內容</p> 24 </div> 25 <div class="push"></div><!--push在此為footer占位，高度和footer的一樣--> 26 </div> 27 <div class="footer"> 28 <p>底部文本</p> 29 </div> 30 31 </body> 32 </html>