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

来源：互联网发布：基尼系数统计学算法编辑：程序博客网时间：2024/05/18 05:21

<!DOCTYPE HTML><html><head> <meta charset="gb2312"> <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>

阅读全文

0 0