CSS如何讓頁腳固定在頁面底部

在進行Web開發(fā)實現(xiàn)頁面時，可能會遇到這樣一種場景：將頁腳footer固定在頁面的底部，如果頁面的主體不能充滿屏幕高度，則footer位于屏幕的底部；如果頁面的主體超出了屏幕高度，則footer始終位于頁面底部。

場景的示意如下圖，

那么如何將頁腳始終固定在頁面底部呢？

一般來說，有兩類方法可以達到此目的，一種是僅僅使用css技巧并配合特定的html結(jié)構(gòu)；另一種是使用js代碼操作dom元素。

本文將介紹三種使用css技巧的方法來達到此目的。

第一種方法

第一種方法的原理是，

頁面中的html，body，container都必須滿足height:100%，這樣就可以占滿整個屏幕（頁面），footer使用相對定位bottom:0，固定在頁面底部，頁面主體page容器容易必須要設(shè)置一個大于等于footer高度的padding-bottom，目的就為了將footer的高度計算在page容器中，這樣一來footer就會始終固定在頁面底部了。

我們先來看下html結(jié)構(gòu)，

<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容器包含在內(nèi)的。

接著看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;
}
/*=======主體內(nèi)容部分省略=======*/

從css代碼中，我們看到，頁面主體page設(shè)置了一個padding-bottom，并且與footer的高度是一致的。這里不能使用margin-bottom來代替padding-bottom。

完整的jsfiddle實例在這里。

這個方案有一個缺點：footer必須要固定高度，page必須要設(shè)置一個大于等于這個高度的padding-bottom。如果footer不是固定高度的，或者需要對footer做自適應，那么這種方案就不太適合了。

第二種方法

第二種方法的原理是：

footer容器與container容易不再有包含關(guān)系，兩者是同級的。給html，body，container容器的高度都設(shè)為100%，即container已經(jīng)占據(jù)滿了整個頁面了，此時再添加footer容器，則footer必定會超出頁面底部，而且會讓頁面出現(xiàn)滾動條。所以，我們給footer添加一個負值的margin-top，將footer容器從屏幕外拉上來。這個負值的margin-top與footer的高度相同。

我們先來看下html結(jié)構(gòu)，

這里可以看出，footer容器和container容器是同級關(guān)系。

再看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容器設(shè)置了一個負值的margin-top，目的就為了將footer容器從屏幕外拉上來。給page容器添加padding-bottom的目的是為了將footer容器的高度計算在page的大小內(nèi)，這樣當頁面出現(xiàn)滾動條的行為才會正確。

完整的jsfiddle實例在這里。

這個方案的缺點跟第一種方法是一樣的。

第三種方法

第三種方法的原理是，

使用一個無內(nèi)容的push容器把footer容器推在頁面最底部，同時還要給container設(shè)置一個負值的margin-bottom，這個margin-bottom與footer容器和push容器的高度是一致的。其實這種方法跟第二種方法是比較接近的。不過它多了一個無意義的push容器。

我們來看下相關(guān)的html結(jié)構(gòu)，

<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部分高度，無法達到自適應高度效果。

總結(jié)

前面介紹的三種方法都是采用css以及配合特定的html結(jié)構(gòu)來達到的。這種方式比較輕量，在新版本的現(xiàn)代瀏覽器上都能夠表現(xiàn)良好。不過使用css這種方式都必須要求footer的高度是固定的，因為頁面主體容器主要就是對這個footer高度作手腳來達到頁腳始終固定在底部的目的。

除了使用css的方式之外，還有一種快糙猛的方式，那就直接使用js代碼來操作dom元素。這種方式對html不作限制，而且理論上能夠兼容所有瀏覽器。不過這種方法我個人不是很推薦，因為直接使用js來操作dom是一個很重的行為，不利于html、css的表現(xiàn)，而且當頁面發(fā)生resize時，頁面由于重繪往往會導致一些閃爍或者卡頓。

參考列表

• 怎么使用Sticky Footer代碼(讓頁腳緊貼頁面底部的方法)
• Exploring Footers
• Make the Footer Stick to the Bottom of a Page
• 如何將頁腳固定在頁面底部