html - 使内容 div 和顶部/底部运行边缘等于 100% 总高度？

Question

好的，我得到了页眉和页脚的绝对定位和 144 像素的高度。中间区域的内容 div 需要是中间区域的全高。

简化:

<style>
  .marginals{
    position: absolute;
    height: 144px; 
    width: 100%; 
    left: 0;
  }
  #header{ top:    0px; }
  #footer{ bottom: 0px; }
</style>

<div id="header" class="marginals"></div>
<div id="content"> Content </div>
<div id="footer" class="marginals"></div>

所以基本上我想要一个 100% - 288px 的 div。起初我以为我可以制作一个 100% x 100% 的 div，顶部和底部有 144 个填充，然后将内容 div 填充到 100%，但我的想法跑偏了。

Here's an example I made using 20% height for 'bread layers'. (Which I can't do on this project) Used 60% height for the scrolling 'meaty layer' and put it at top: 20%;

Answer 1

你有什么不会工作，表格和绝对定位不能很好地结合在一起，并且表格行和单元格的高度在浏览器中处理不一致，所以我认为你会发现很难获得顶部/底部行保持固定高度，同时仍然要求中间行滚动

但是我认为您的原始帖子和使用绝对定位是正确的，但是您不需要百分比，您可以一起使用顶部和底部坐标，因此您可以告诉中间 div 从 144px 开始顶部和底部距离结束 144px..

例如

HTML:

   <div class="header">Some header content</div>

   <div class="wrap">
   Bulk content<br>bulk content<br>bulk content<br>bulk content<br>
   Bulk content<br>bulk content<br>bulk content<br>bulk content
   </div>

   <div class="footer">Some footer content</div>

CSS:

html, body {margin: 0; padding: 0; height: 100%; overflow: hidden;}

.wrap { 
  position: absolute;
  left: 0;
  top: 144px; /* = height of header including any borders or padding */
  bottom: 144px; /* = height of footer including any borders or padding */
  width: 100%;
  background: #fff;
  overflow: auto;
}

.header, .footer {
position: absolute;
width: 100%;
left: 0;
height: 140px;
background: #f00;
}

.header {
top: 0;
border-bottom: 4px solid #000;
}

.footer {
bottom: 0;
border-top: 4px solid #000;
}

整个事情是基于设置了 100% 高度的 html, body 元素

示例:here