如何动态设置div元素以填充剩余的高度？

Question

如何动态设置div元素以填充剩余的高度？

5

所以，我的代码大致如下：

<html>
<body>
    <div id="header" style="width:100%;min-height:0;display:block;background-color:#000">
        <img src="header_image.svg" />
    </div>
    <div id="content" style"display:block">
        Some content
    </div>
</body>
</html>

我在 header 中有一个 SVG，它的宽度设置为与窗口相同，高度按比例缩放。然后，页面的其余部分在另一个 div 中。我希望页面不会滚动，并且此内容 div 会填充以适应其余窗口。问题是，由于 header 的高度随着窗口宽度的变化而变化，所以我无法将内容 div 设置为像素、百分比或任何具体的数值。

如何设置内容 div 的高度，使其根据 header 的高度动态调整？

我不懂 JavaScript 或 JQuery（我知道，我知道-该学了），但理想情况下，内容 div 的高度将设置为类似于 height:(视口高度)-(header 高度) 这样的数值，但我不知道如何实现。

- tuckerchapin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- avrahamcool · Accepted Answer

你不必使用脚本来实现这个功能。另外，我建议你将样式与标记分开。

HTML

<div id="wrapper">
    <div id="header">
        <img src="header_image.svg" alt="the img is empty"/>
    </div>
    <div id="content">Some content</div>
</div>

将此添加到您的CSS中

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

/* this is the big trick*/
#wrapper:before {
    content:'';
    float: left;
    height: 100%;
}
#wrapper {
    height: 100%;
    background-color: black;
    color: white;
}
#header {
    background-color:#000;
}
#content {
    background-color: gray;
}
/* this is the big trick*/
#content:after {
    content:'';
    display: block;
    clear: both;
}

可运行的例子

测试通过：IE10、IE9、IE8、FF、Chrome。

没有使用绝对定位
没有使用脚本（纯CSS解决方案）
液态布局
跨浏览器

说明： 使用伪元素创建一个浮动元素（没有内容或宽度，所以他是不可见的），该元素具有容器高度的100％。

使用另一个伪元素，在content div后面创建一个div（也没有内容，所以他也是不可见的），具有clear属性。因此，它必须在我之前创建的浮动元素下面。使content向下延伸到底部。