Question

好的，所以我有一个标题和页脚，绝对定位和144px的高度。中间区域的内容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％，但我的想法已经在某处流失了。

enter image description here

这是我使用20％高度为'面包层'制作的一个例子。（我不能在这个项目上做）使用60％的高度滚动“肉层”并将其置于顶部：20％;

Answer 1

你所拥有的东西不起作用，桌子和绝对定位不能很好地融合在一起，桌面行和单元格的高度无论如何都不能在浏览器中保持一致，所以我觉得你很难找到顶级/底部行保持固定高度，同时仍要求中间行滚动

但是我认为你的原始帖子和使用绝对定位是正确的，你不需要百分比，你可以使用顶部和底部坐标，所以你可以告诉中间div从144px开始顶部并从底部完成144px ..

e.g。

<强> 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;
}

整个事情基于html, body元素的高度设置为100％

示例：here

Answer 2

看起来你正在尝试创建一个3液体行布局。为什么不尝试这样的事情：

小提琴： http://jsfiddle.net/jCjsD/2/

HTML

<body>

<div id="body_container">
    <div id="header">Some header content</div>
    <div id="content"><!-- Bulk content here !--></div>
</div>

<div id="footer">Footer</div>

</body>

CSS

#header, #content, #footer {
    float: left;
    width: 100%;
}

#header {
    border-bottom: 1px solid #888;
    background: yellow;
}

#footer {
    border-top: 1px solid #888;
    background: yellow;
}

#content {
    clear: both;
    padding-bottom: 50px;
}

#footer {
    position: relative;
    margin-top: -50px;
    height: 50px;
    clear:both;
}   

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

#body_container {
    min-height: 100%;
}

使内容div和上/下跑边距等于100％总高度？

2 个答案:

示例：here

HTML

CSS