具有顶部和底部边距的拉伸div - css / css3

Question

我有一个div的页面如下;

<div id="container">
    <div id="header"></div>
    <div id="content">
        <div id="wrap2"></div>
        <div id="wrap"></div>
    </div>
    <div id="footer"></div>
</div>

我有wrap2的特定高度，我希望wrap填充wrap2下面的区域，但高于footer。你可以看到小提琴 here 。我想在wrap和wrap2之间延伸footer。我正在寻找一个纯粹的CSS解决方案。

我该怎么做？

Answer 1

你不能用纯CSS。这可能是关于CSS的最大抱怨。最准确的选择是使用JavaScript。在onload和onresize上调用一个JS函数来抓取视口的高度，减去页脚和标题的高度，然后设置div的高度以填充其余部分。

Answer 2

我通过为padding-bottom: 31px;设置#content并为100% height设置wrap来解决此问题。

您可以看到结果小提琴 here

感谢@DA，@ Japero和@Ima学生