1 将html、body的高度设为100%，这样是为了使用body的子元素height：100%；生效（在我的另一篇博文有详细说明）： html,body{ height: 100%; mar
1 将html、body的高度设为100%，这样是为了使用body的子元素height：100%；生效（在我的另一篇博文有详细说明）：
html,body{ height: 100%; margin: 0; padding: 0;}2 基本布局：
<body><!--容器--><div class="container"> <!--内容--> <div> <!--你的内容--> </div> <!--页脚--> <div class="footer"> footer </div></div><body>3 对容器进行css处理：
.container{ min-height: 100%; /*border: 1px solid red;*/ text-align: center; padding-bottom: 60px; box-sizing: border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ position: relative;}
4 对页脚进行css处理：
.footer{ position: absolute; bottom: 0; width: 100%; height: 60px; background: lavender; text-align: center;}Tip： 页脚要对“容器”进行绝对定位，而不是body。
5 完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS + DIV 让页脚始终底部</title> <meta name="generator" content="" /> <!--在移动端按比例缩放--> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;"> <style> html,body{ height: 100%; margin: 0; padding: 0; } .container{ min-height: 100%; /*border: 1px solid red;*/ text-align: center; padding-bottom: 60px; box-sizing: border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ position: relative; } .footer{ position: absolute; bottom: 0; width: 100%; height: 60px; background: lavender; text-align: center; } </style></head><body><div class="container"> <div> content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/> content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/> content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/> content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/> content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/> content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content-bottom </div> <div class="footer"> footer </div></div><body></html>当然，让页脚固定底部有很多方法，还想了解更多的方法，可以参考下面的博文：
http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page
