css经典布局——头尾固定高度中间高度自适应布局
博客专区 > furw 的博客 > 博客详情
css经典布局——头尾固定高度中间高度自适应布局
furw 发表于2年前
css经典布局——头尾固定高度中间高度自适应布局
  • 发表于 2年前
  • 阅读 69
  • 收藏 6
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

<!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>


  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 19
博文 44
码字总数 14655
×
furw
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: