CSS Flex 动态填充可用高度（无高度或位置）

Question

如何在不指定 height 或 position（静态）属性的情况下使 CSS Flex 动态填充可用高度？

在下面的 XHTML 代码中，我需要浅蓝色框来填充 space 到浅红色元素。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Flex Vertical Fill Test</title>
<style type="text/css">
#e1, #e2 {float: left; width: 50%;}
#e1 {background-color: #cff;}
#e2 {background-color: #ffc;}
#e3 {background-color: #fcf; clear: both;}
</style>
</head>

<body>

<div id="e1">
<div><p>Needs to use full available height.</p></div>
</div>

<div id="e2">
<p>Automatically generates height from content.</p>
<p>Automatically generates height from content.</p>
<p>Automatically generates height from content.</p>
<p>Automatically generates height from content.</p>
</div>

<div id="e3"><p>Natural content below</p></div>

</body>
</html>

我正在 Firefox 首先，然后 Chrome 和 IE 进行测试。

Answer 1

好的，我可以给出一些纯 css 的解决方案，但是用 js 做是正确的。

这是 html 部分

<div class="container">
    <div class="fake-bg"></div>
    <div class="fake-bg"></div>
    <div id="e1"><p>Needs to use full available height.</p></div>
    <div id="e2">
        <p>Automatically generates height from content.</p>
        <p>Automatically generates height from content.</p>
        <p>Automatically generates height from content.</p>
        <p>Automatically generates height from content.</p>
    </div>
    <div class="clear"></div>
</div>

<div id="e3"><p>Natural content below</p></div>

和css帕特

.container {
    position: relative;
}
.clear {
    clear: both;
}
.fake-bg {
    height: 100%;
    position: absolute;
    width: 50%;
    z-index: -1;
}

.fake-bg:nth-of-type(1) {
    background-color: #cff;
    left: 0;
    top: 0;
}
.fake-bg:nth-of-type(2) {
    background-color: #ffc;
    right: 0;
    top: 0;
}

#e1, #e2 {float: left; width: 50%;}
#e1 {background-color: #cff;}
#e2 {background-color: #ffc;}
#e3 {background-color: #fcf; clear: both;}

一个 jsfiddle 示例

enter link description here

Answer 2

为了让它工作，我为 e1 和 e2 添加了一个容器。

<div id="e1-e2">
    <div id="e1">
        <p>Needs to use full available height.</p>
    </div>
    <div id="e2">
        <p>Automatically generates height from content.</p>
        <p>Automatically generates height from content.</p>
        <p>Automatically generates height from content.</p>
        <p>Automatically generates height from content.</p>
    </div>
</div>
<div id="e3">
    <p>Natural content below</p>
</div>

选项 1：使用 table 和 table-cell（推荐）。

#e1-e2 {
    display: table;
}
#e1, #e2 {
    display: table-cell;
    width: 50%;
}

演示：http://jsfiddle.net/qnz7mao6/

选项 2：使用 flexbox.

#e1-e2 {
    display: flex;
}
#e1, #e2 {
    width: 50%;
}

演示：http://jsfiddle.net/86n04amt/

选项 3：如果您仍然喜欢 float 布局。

#e1-e2 {
    overflow: hidden;
}
#e1, #e2 {
    float: left;
    width: 50%;
}
#e1 {
    background-color: #cff;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

演示：http://jsfiddle.net/11k8hds9/

提示：为 <p> 使用 padding 而不是 margin 以避免不必要的间隙。

CSS Flex 动态填充可用高度（无高度或位置）

CSS Flex fill available height dynamically (without height or position)

css

flexbox