要求:网页布局中,页脚在底部.内容不够一页时,在底部.内容超过一页时,出现卷动条,页脚也在被挤到底部
1.测试的这个文章介绍的办法 链接: http://www.cnblogs.com/chenyuming507950417/p/4003651.html
经测试,这个办法可以实现要求.
2.测试代码说明
html结构:
<div class="container">
<div class="header">头</div>
<div id="content" class="content">内容</div>
<div class="footerbox">脚部</div>
</div>
css(关键)
.container {
position: absolute; /*关键1,容器定位是 absolute,测试发现换成 relative 的,会不行.*/
min-height: 100%; /*关键2,容器的最小高度为视口高度*/
/**/
width: 100%;
}
.content {
/*这个距离是内容区到footer的距离,防止footer遮住内容区域*/
padding-bottom: 54px;
}
.footerbox {
position: absolute; /*关键3,绝对定位,相对于.container*/
bottom: 0px; /*关键4,定位位置在底部*/
/**/
background-color: #000;
height: 30px;
line-height: 30px;
margin: 0;
padding: 0;
width: 100%;
}
3.完整测试代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>CSS + DIV 让页脚始终底部</title>
<meta name="generator" content="" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
position: absolute; /*关键1,容器定位是 absolute,测试发现换成 relative 的,会不行.*/
min-height: 100%; /*关键2,容器的最小高度为视口高度*/
/**/
width: 100%;
}
.content {
/*这个距离是内容区到footer的距离,防止footer遮住内容区域*/
padding-bottom: 54px;
}
.footerbox {
position: absolute; /*关键3,绝对定位,相对于.container*/
bottom: 0px; /*关键4,定位位置在底部*/
/**/
background-color: #000;
height: 30px;
line-height: 30px;
margin: 0;
padding: 0;
width: 100%;
}
.footer {
width: 1080px;
color: forestgreen;
height: 30px;
line-height: 30px;
margin: 0 auto;
}
p {
text-align: center;
font-size: 1em;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
底部footer,内容少时自动在最底下,内容多时撑开后到最底下
<button onclick="additem()">增加内容</button>
</div>
<div id="content" class="content">
</div>
<div class="footerbox">
<div class="footer">
这是脚,这是脚,这是脚,这是脚,这是脚,这是脚,这是脚,这是脚,这是脚,这是脚,这是脚,这是脚,这是脚
</div>
</div>
</div>
<script>
for (var i = 0; i < 35; i++) {
var about = document.getElementById("content");
var para = document.createElement("p");
var node = document.createTextNode("这是原有内容" + about.childElementCount);
para.appendChild(node);
about.appendChild(para);
}
function additem() {
var about = document.getElementById("content");
var para = document.createElement("p");
var node = document.createTextNode("新加入一行内容" + about.childElementCount);
para.appendChild(node);
about.appendChild(para)
}
</script>
</body>
</html>