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

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

場(chǎng)景的示意如下圖，

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

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

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

第一種方法

第一種方法的原理是，

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

我們先來看下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不識(shí)別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è)置了一個(gè)padding-bottom，并且與footer的高度是一致的。這里不能使用margin-bottom來代替padding-bottom。

完整的jsfiddle實(shí)例在這里。

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

第二種方法

第二種方法的原理是：

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

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

這里可以看出，footer容器和container容器是同級(jí)關(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è)置了一個(gè)負(fù)值的margin-top，目的就為了將footer容器從屏幕外拉上來。給page容器添加padding-bottom的目的是為了將footer容器的高度計(jì)算在page的大小內(nèi)，這樣當(dāng)頁面出現(xiàn)滾動(dòng)條的行為才會(huì)正確。

完整的jsfiddle實(shí)例在這里。

這個(gè)方案的缺點(diǎn)跟第一種方法是一樣的。

第三種方法

第三種方法的原理是，

使用一個(gè)無內(nèi)容的push容器把footer容器推在頁面最底部，同時(shí)還要給container設(shè)置一個(gè)負(fù)值的margin-bottom，這個(gè)margin-bottom與footer容器和push容器的高度是一致的。其實(shí)這種方法跟第二種方法是比較接近的。不過它多了一個(gè)無意義的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的負(fù)值等于footer高度*/
}
.push,
#footer {
    height: 60px;
    clear:both;
}
/*==========其他div效果省略==========*/

完整的jsfiddle實(shí)例在這里。

缺點(diǎn)：較之前面的兩種方法，多使用了一個(gè)div.push容器，同樣此方法限制了footer部分高度，無法達(dá)到自適應(yīng)高度效果。

總結(jié)

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

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

參考列表

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