在進行Web開發實現頁面時，可能會遇到這樣一種場景：將頁腳footer固定在頁面的底部，如果頁面的主體不能充滿屏幕高度，則footer位於 屏幕的底部 ；如果頁面的主體超出了屏幕高度，則footer始終位於 頁面底部 。
場景的示意如下圖，
那么如何將頁腳始終固定在頁面底部呢？
一般來說，有兩類方法可以達到此目的，一種是僅僅使用css技巧並配合特定的html結構；另一種是使用js代碼操作dom元素。
本文將介紹三種使用css技巧的方法來達到此目的。
第一種方法
第一種方法的原理是，
頁面中的
html，body，container都必須滿足height:100%，這樣就可以占滿整個屏幕（頁面），footer使用相對定位bottom:0，固定在頁面底部，頁面主體page容器容易必須要設置一個大於等於footer高度的padding-bottom，目的就為了將footer的高度計算在page容器中，這樣一來footer就會始終固定在頁面底部了。
我們先來看下html結構，
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left Sidebar</div>
<div id="content">Main content</div>
<div id="right">Right sidebar</div>
</div>
<div id="footer">Footer Section</div>
</div>
這里唯一需要注意的就是， footer 容器是被 container 容器包含在內的。
接着看css代碼，
html,body {
margin: 0;
padding:0;
height: 100%;
}
#container {
min-height:100%;
height: auto !important;
height: 100%; /*IE6不識別min-height*/
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;/*等於footer的高度*/
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;/*腳部的高度*/
background: #6cf;
clear:both;
}
/*=======主體內容部分省略=======*/
從css代碼中，我們看到，頁面主體 page 設置了一個 padding-bottom ，並且與 footer 的高度是一致的。這里不能使用 margin-bottom 來代替 padding-bottom 。
完整的jsfiddle實例在 這里 。
這個方案有一個缺點： footer 必須要固定高度， page 必須要設置一個大於等於這個高度的 padding-bottom 。如果 footer 不是固定高度的，或者需要對footer做自適應，那么這種方案就不太適合了。
第二種方法
第二種方法的原理是：
footer容器與container容易不再有包含關系，兩者是同級的。給html，body，container容器的高度都設為100%，即container已經占據滿了整個頁面了，此時再添加footer容器，則footer必定會超出頁面底部，而且會讓頁面出現滾動條。所以，我們給footer添加一個負值的margin-top，將footer容器從屏幕外拉上來。這個負值的margin-top與footer的高度相同。
我們先來看下html結構，
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main content</div>
<div id="right">Right sidebar</div>
</div>
</div>
<div id="footer">Footer section</div>
這里可以看出， footer 容器和 container 容器是同級關系。
再看css代碼，
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
}
#page {
padding-bottom: 60px; /*高度等於footer的高度*/
}
#footer {
position: relative;
margin-top: -60px; /*等於footer的高度*/
height: 60px;
clear:both;
background: #c6f;
}
/*==========其他div省略==========*/
我們給 footer 容器設置了一個 負值 的 margin-top ，目的就為了將 footer 容器從屏幕外拉上來。給 page 容器添加 padding-bottom 的目的是為了將footer 容器的高度計算在 page 的大小內，這樣當頁面出現滾動條的行為才會正確。
完整的jsfiddle實例在 這里 。
這個方案的缺點跟第一種方法是一樣的。
第三種方法
第三種方法的原理是，
使用一個無內容的
push容器把footer容器推在頁面最底部，同時還要給container設置一個負值的margin-bottom，這個margin-bottom與footer容器和push容器的高度是一致的。其實這種方法跟第二種方法是比較接近的。不過它多了一個無意義的push容器。
我們來看下相關的html結構，
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
<div id="right">Right Content</div>
</div>
<div class="push"><!-- not put anything here --></div>
</div>
<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 -60px;/*margin-bottom的負值等於footer高度*/
}
.push,
#footer {
height: 60px;
clear:both;
}
/*==========其他div效果省略==========*/
完整的jsfiddle實例在 這里 。
缺點：較之前面的兩種方法，多使用了一個 div.push 容器，同樣此方法限制了 footer 部分高度，無法達到自適應高度效果。
總結
前面介紹的三種方法都是采用css以及配合特定的html結構來達到的。這種方式比較輕量，在新版本的現代瀏覽器上都能夠表現良好。不過使用css這種方式都必須要求 footer 的高度是固定的，因為頁面主體容器主要就是對這個footer高度作手腳來達到頁腳始終固定在底部的目的。
除了使用css的方式之外，還有一種 快糙猛 的方式，那就直接使用js代碼來操作dom元素。這種方式對html不作限制，而且理論上能夠兼容所有瀏覽器。不過這種方法我個人不是很推薦，因為直接使用js來操作dom是一個很 重 的行為，不利於html、css的表現，而且當頁面發生resize時，頁面由於重繪往往會導致一些閃爍或者卡頓。
參考列表
- 怎么使用Sticky Footer代碼(讓頁腳緊貼頁面底部的方法)
- Exploring Footers
- Make the Footer Stick to the Bottom of a Page
- 如何將頁腳固定在頁面底部
End. All rights reserved @gejiawen .
在進行Web開發實現頁面時，可能會遇到這樣一種場景：將頁腳footer固定在頁面的底部，如果頁面的主體不能充滿屏幕高度，則footer位於 屏幕的底部 ；如果頁面的主體超出了屏幕高度，則footer始終位於 頁面底部
轉自：http://ju.outofmemory.cn/entry/194786