CSS如何让页脚固定在页面底部

在进行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结构，

这里可以看出，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
• 如何将页脚固定在页面底部