顶部和底部固定中间自适应的布局

最新推荐文章于 2021-11-28 23:32:06 发布

原创最新推荐文章于 2021-11-28 23:32:06 发布 · 4.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#layout #css

css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种网页布局方案，通过使用绝对定位和高度百分比实现头部和底部固定，中间内容区域自适应伸缩的效果。适用于需要稳定头部和尾部而中间内容长度不定的情况。

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>头尾固定中间高度自适应布局</title>
 <style>
  html, body {
   height:100%;
   /*相对的最外层容器的高度要为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:100px;
   position:absolute;
   z-index:10;
   bottom:100px;
   _height:100%;
   /*不要加height：100%*/
  }
  .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>