固定于页面底部不是指屏幕底部，而是当页面内容较少不能占满屏幕时，页脚不会上浮（此时位于屏幕底部）。当页面内容较多，浏览器有滚动条出现，页脚会处于页面最底，需要将滚动条拉到底才能看到。这样的效果通常是希望得到的结果。
思路：
1.将 html 、body 的高度设置为 100%，margin :0;
2.body 内建 div#page和 div#footer ，它们处于相同的层次，都使用相对定位，div#page 将包含页面中其它所有的部分包括页头和主体。
3.div#page 的高度也设置为100%。此时，div#page 的高度将占据整个页面。而 div#footer 会挨在 div#page 的下面，造成一个滚动条出现。
4.利用 margin-top 将 div#footer 的位置向上移，如 margin-top:-60px（假设 div#page 的高度是 60px ）
这样，无论 div#page 内的内容较少还是较多，div#footer 的位置都处于 div#page 的底部。但是还有一些细节要处理，比如 div#footer 会盖住 div#page 底部的内容。为了不影响 div#page 的高度，需要在 div#page 内再套一层 div#container ，所有的页面内容放在这个div#container 里，给 div#container 设置一个 padding-bottom ，值等于 div#footer 的高度即可。具体代码如下：
html
<div id="page">
<div id="container"></div>
</div>
<div id="footer">footer</div>
css
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#page {
min-height: 100%;
height: auto !important;
height: 100%; /* 解决 ie 不支持 min-height */
}
#container {
padding-bottom: 60px; /* 高度等于footer的高度 */
}
#footer {
position: relative;
margin-top: -60px; /* 高度等于footer的高度 */
height: 60px;
}
这种方法 div#page 和 div#container 的 height 都应当是auto ，你可以在 div#container 内写其它的部分，页头、浮动的左侧…
完全由 css 实现，兼容性强。但是必须给底部设置一个固定的高度值，不能实现自适应的高度。