html - 如何在 CSS 中设置 float div 的高度？

Question

我有两个 float div，每个都是 50% 宽，我遇到的问题是我无法让它们拉伸(stretch)到窗口的整个高度。基本上我希望每个 div 有 50% 的宽度和 100% 的高度(但它不工作)

html

<section>
    <div></div>
</section>
<section>
    <div></div>
</section>

CSS

section {
    background: black;
    width: 50%; min-height: 100%; height: 100%;
    margin: 0;
    float: left;
}
section > div {
    height: 100%;
}

Answer 1

假设当您谈论 100% 高度时，您指的是 100% 的视口(viewport)，为了对像 div 这样的元素使用 100% 高度，您需要将它的容器元素设置为 100%还有...很可能，您的 body/html 标签没有设置为 100%，这就是为什么将 100% 高度设置为两个 float div 似乎不起作用的原因!

例如:

html, body { width:100%; height:100%; }
div#one { float:left; width:50%; height:100%; }
div#two { float:right; width:50%; height:100%; }

这是一个示例 CSS 代码，还有其他方法可以用更少的代码...

希望对您有所帮助!