顶部和底部高度固定，中间高度自适应

最新推荐文章于 2021-12-13 11:57:07 发布

废柴小z

最新推荐文章于 2021-12-13 11:57:07 发布

阅读量905

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/qq_34568700/article/details/104974560

版权

HTML+CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>头尾固定中间高度自适应布局</title>
 <style>
  html, body {
   height:100%;
   margin:0;
   padding:0;
  }
  #container{
   position: relative;
   height:100%;
   margin:0;
   padding:0;
   overflow:hidden;
  }
  #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和bottom
   position:absolute;
   top:100px;
   bottom:100px;
   z-index:10;
  }
  .mycontent {
   padding:20px;
  }
  #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="container">
 <div id="dHead">固定头部100px;</div>
 <div id="dBody">
  <div class="mycontent"> 中间自适应部分<br>
  </div>
 </div>
 <div id="dFoot">固定尾部100px</div>
</div>
 
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

废柴小z

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
顶部和底部高度固定，中间高度自适应

<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>头尾固定中间高度自适应布局</title> <style> html, body { height:100%; margin:0; padding:0; } #...
复制链接

扫一扫