摘自：http://paranimage.com/css-sticky-footer/
先说我们为什么会使用到这个CSS底部固定布局解决方案:
有这种情况：当正文内容很少时，底部位于窗口最下面。但当改变窗口高度时，会出现重叠问题。如下所述
当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白。
对于追未完美的设计师来说，这是不美观的。网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。
下面是我找到的一个比较完美的方法，来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。
一、来自http://www.cssstickyfooter.com/using-sticky-footer-code.html的解决方法
<div id="wrap"> <div id="main" class="clearfix"> <div id="content"> </div> <div id="side"> </div> </div> </div> <div id="footer"> </div>
说明: 使用这个布局的前提，就是footer要在总的div容器之外，footer使用一个层，其它所有内容使用一个总的层。如果确实需要到添加其它同级层，那这个同级层就必须使用position:absolute进行绝对定位。
CSS代码: 下面是主要的CSS代码，让你的底部可以位于窗口的最下面:
html, body, #wrap {height: 100%;} body > #wrap {height: auto; min-height: 100%;} #main {overflow:auto;padding-bottom: 150px;} /* 必须使用和footer相同的高度 */ #footer {position: relative; margin-top: -150px; /* footer高度的负值 */ height: 150px;
clear:both; }
/*Opera Fix*/ body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px;/}
<!--[if !IE 7]> <style type="text/css"> #wrap {display:table;height:100%} </style> <![endif]-->
说明: 需要注意的就是#main的padding值、footer的高度和负margin值，需要保持一致。
所有页面最好对IE6以下的版本和IE8进行条件注释，!IE 7指不是IE7的其他IE版本
就是这么简单，不过还没完。如果你的主体是使用悬浮布局，还得解决一些浏览器的兼容问题，这里使用的重点是为了Goolge Chrome。
对#main部份进行著名的Clearfix Hack:
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
注: 该方案测试于两栏悬浮布局，兼容各大主流浏览器，包括Google Chrome。
二、来自Ryan Faits的方法
<html> <head> <link rel="stylesheet" href="layout.css" ... /> </head> <body> <div class="wrapper"> <p>Your website content here.</p> <div class="push"></div> <!----> </div> <div class="footer"> <p>Copyright (c) 2008</p> </div> </body> </html>
CSS代码
* {margin: 0; } html, body {height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; /*和push的高度一致*/ } .footer, .push {height: 4em; } /*和wrapper的负边距一致*/
说明：主要思路是在wrapper层下面多加一个push层，并让wrap div的下负间距和push div以及footer的高度一致