Question

因此。我的代码是

的代码

<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>

我在标题中设置了一个svg，以便它与窗口的宽度相匹配，高度可以保存svg。然后我将页面的其余部分放在另一个div中。我希望这样页面不会滚动，这个内容div填充以适应窗口的其余部分。问题是，由于标题的高度随窗口的宽度而变化，我无法设置内容div（以像素为单位）或百分比或具体的任何内容。

如何设置内容div的高度以随着标题的高度动态变化？

我不知道Javascript或JQuery（我知道，我知道 - 我应该），但理想情况下，内容div的高度将设置为高度:(视口高度） - （高度标题），但我不知道如何做到这一点。

Answer 1

您不必使用脚本。还有：我建议你将样式与标记分开。

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

Working Fiddle

经过测试： IE10，IE9，IE8，FF，Chrome。

没有使用绝对定位
没有使用Script（纯CSS解决方案）
流体布局
跨浏览器

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

并且使用另一个伪元素我正在content div之后创建一个div。（也没有内容，所以他也是隐形的）具有明确的属性。所以他必须低于我之前创造的漂浮物。让content一直向下。

设置div以动态填充其余高度？

1 个答案: