css经典布局——头尾固定高度中间高度自适应布局

<!DOCTYPE HTML> 
 
<html>

<head>
<meta charset="utf-8">
<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;
}

#dBody {
background: #FC0;
width: 100%;
overflow: auto;
top: 100px;
position: absolute;
z-index: 10;
bottom: 100px;
}

#dFoot {
height: 100px;
line-height: 100px;
background: #690;
width: 100%;
position: absolute;
z-index: 200;
bottom: 0;
text-align: center;
}
</style>
</head>

<body>
<div id="dHead">固定头部100px;</div>
<div id="dBody">
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br> 中间自适应部分
<br>
</div>
<div id="dFoot">固定尾部100px</div>
</body>

</html>


你可能感兴趣的:(css经典布局——头尾固定高度中间高度自适应布局)