序：当希望将footer保持在页面底部（即使页面内容高度低于窗口高度），可以尝试下面的方法..
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>CSS让footer保持在页面底部</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%; /*让页面撑满窗口*/
}
.body {
min-height: 100%;
height: auto !important;
height: 100%; /*设置页面内容区域最小占满窗口高度*/
margin: 0 0 -41px; /*利用margin负值留出footer的区域(由于footer设置了1px的border，所以值在原有高度上+1)*/
text-align: center;
}
footer {
height: 40px;
line-height: 40px;
border-top: 1px solid #ddd;
text-align: center;
}
</style>
</head>
<body>
<div class="body">
<header>我是头部</header>
<div>我是内容</div>
</div>
<footer>我是页脚，我总是固定在页面底部</footer>
</body>
</html>
作者：@zhnoah
出处：http://www.cnblogs.com/zhnoah/
本文版权归本人和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连
接，否则保留追究法律责任的权利。
时间： 2024-10-25 12:59:39