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

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐