一，头尾固定中间高度自适应布局
布局要求：
1 头部固定高度，宽度100%自适应父容器；
2 底部固定高度，宽度100%自适应父容器；
3 中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条；
4 整个内容填满浏览器可视区域，并且不超出此区域！
方法一：position:absolute定位，不设高，并改变“包含块”的尺寸渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body {
height:100%;
margin:0;
padding:0
}
#dHead {
height:100px;
line-height:100px;
background:#690;
width:100%;
position:absolute;
z-index:5;
top:0;
text-align:center;
}
#dFoot {
height:100px;
line-height:100px;
background:#690;
width:100%;
position:absolute;
z-index:200;
bottom:0;
text-align:center;
}
#dBody {
background:#FC0;
width:100%;
overflow:auto;
top:100px;
position:absolute;
z-index:10;
bottom:100px;
}
.content{
width:300px;
height:900px;
background-color: #00F7DE;
}
</style>
</head>
<body>
<div id="dHead"></div>
<div id="dBody">
<div class="content"></div>
</div>
<div id="dFoot"></div>
</body>
</html>
时间： 2025-01-17 08:48:07