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