三个div，中间可滚动和自动填充内容

Question

我有三个垂直堆叠的div。标题，内容和页脚。 所有这些都将宽度设置为页面宽度的100％。 页眉和页脚有一个确定的高度（比方说75px）。

我正在尝试使内容div被页脚向上推，并使其填充其间留下的所有空间。 （如果页脚因为不可见而内容div也将填补该空白）

我该怎么做？ 感谢。

这是我到目前为止的代码。

<div id="wrapper">
        <div id="header" style="background-color: orange;width: 100%;height: 75px;position: absolute;top: 0;left: 0;"></div>
        <div id="content" style="background-color: gray;width: 100%;height:100%;overflow: visible;"></div>
        <div id="footer" style="background-color: red;width: 100%;height: 75px;position: absolute;left: 0;bottom: 0;"></div>
</div>

Answer 1

你可以绝对定位，并说“从顶部75px到底部75px。”

demo

---

如果不修改代码中的任何其他内容，#content div的样式就会像这样。

#content {
    background-color: gray;
    position: absolute;
    top: 75px;
    left: 0;
    bottom: 75px;
    width: 100%;
}

Answer 2

当然有可能，但我认为你应该使用CSS3。

首先，您需要将所有父元素的高度设置为100％。

您需要将box-sizing设置为border-box，因为您需要在之后设置填充顶部。您可以设置填充顶部，因为您不希望在标题下包含隐藏文本。

CSS3框大小示例：

box-sizing: border-box;
-o-box-sizing: border-box;
-icab-box-sizing: border-box;
-khtml-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

查看this示例。