footer 在页面对底部

mjygz

于 2014-03-25 16:20:41 发布

阅读量522

点赞数 1

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试底部footer</title>
<style type="text/css">
html, body{
height:100%;
}
#container {
min-height:100%; /*使内容高度和body一样*/
margin-bottom:-80px;/*向上缩减80像素，不至于footer超出屏幕可视范围*/
}
#content {
padding-bottom:150px; /*这个是关键，处理页面高度超出屏幕可视范围时，控制内容和底部高度之间距离*/
height:1600px;
background-color: gray;
}
#footer {
height:80px;
}
</style>
</head>
<body>
<div id="container">
	<div id="content">页面正文</div>
</div>
<div class="footer">

</div>
</body>
</html>