在不确定页面高度的情况下，实现一个固定于底部的内容块，应该是每一个前端开发人员都遇到过的问题。解决此问题的方法思路众多，js脚本以及纯css方法都能够实现，本文主要介绍只用css实现固定底部的效果。
纯css实现固定底部效果方法一：
HTML代码部分，可根据实际自行修改。
<div id=”container”>
<div id=”content”></div>
</div>
<div id=”footer”>固定于底部的内容</div>
CSS代码部分，可根据实际自行修改。
html,body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }//ie6不支持min-height，height:auto是必须的
#footer {clear: both;position: relative;z-index: 10;height:30px;margin-top: -30px;}//注意height的值与margin-top的数据值
#content { padding-bottom:30px; } //注意这里，一定要padding-bottom的值为footer的高度
完整代码示例：
可以通过拉伸窗口，最大化最小化窗口来观察本示例的效果。案例中文字部分可以编辑，可以增加一些内容来查看示例效果。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>纯css实现固定底部效果方法一</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
/* 主要部分 */
html, body, #container { height: 100%; margin: 0; padding: 0; }
body > #container { height: auto; min-height: 100%; }
#content { padding-bottom: 60px; }
#footer { clear: both; position: relative; z-index: 10; height: 60px; margin-top: -60px; }
/* 样式部分 */
body { font: .75em/normal "Lucida Sans", "Lucida Grande", sans-serif; }
a, a:link, a:visited { color: #c6762f; text-decoration: underoline; }
p { margin-bottom: 1em; }
#about { padding: 50px;outline:none;}
#footer { background-color: black; color: white; font-size: 200%; text-align: center; line-height: 3em; }
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="about" contenteditable='true'>
<p>
可以通过最大化，最小化窗口，拉伸窗口来看本示例的效果。
</p>
<p>
纯CSS实现固定底部的效果示例页面。可以编辑这里的文字内容。
</p>
</div>
</div>
</div>
<div id="footer">
固定不变的底部
</div>
</body>
</html>
纯css实现固定底部效果方法二：
第二个方法与第一个方法都是大同小异，只不过是在浏览器兼容性方面下足了功夫。不多说，看代码部分。
Html部分：
<div id="wrap"> <div id="header"> </div> <div id="main"> </div> </div> <div id="footer"> </div>CSS部分：
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;padding-bottom: 150px;} /* 要与footer的高度相同 */
#footer {position: relative;margin-top: -150px;height: 150px;clear:both;}
/*Opera 兼容*/
body:before {content:””;height:100%;float:left;width:0;margin-top:-32767px;}
可以看到，html部分与第一个方法的结构相同，只是多了一个header部分。这里需要注意的是这两种方法的header都需要加入到第一部分中。另外就是css的写法，写了针对opera的兼容，这里很惭愧我没有细细研究第一种方法的opera的兼容。有兴趣的朋友可以深究。
另外作者还写了针对ie的兼容：
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
示例效果不多说了，更详细的信息可以看下原作者的介绍。http://www.cssstickyfooter.com/
网上还有很多的这种类似的方法解决此类问题，但是主要的思路都是给html，body，外部元素，定义一个height:100% 这里需要注意的问题是，如果页面中需要调用页面的高度的时候会出现错误。所以这里需要权衡一下。
如果出现此类问题，可以参考下面这篇采用js实现的方法，http://www.alistapart.com/articles/footers/
最后分享一个浏览器兼容性测试的网站，以各种浏览器显示截图的方式里列出了页面在各个浏览器中的显示效果。地址：http://browsershots.org/