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

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>头尾固定中间高度自适应布局</title><style>html, body {height:100%;/*相对的最外层容器的高度要为100%*/margi...

github_39274378

4616人浏览 · 2017-09-05 12:47:48

github_39274378 · 2017-09-05 12:47:48 发布

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