html - 如何使父级高度未知的内部div全高？

Question

我需要 .col 为 .row 高度的 100%，但您可以看到第二个 .col 不够。我怎样才能在不使用任何“魔数(Magic Number)”的情况下让它工作？

http://jsfiddle.net/b21g6fme/

.row {
    position: relative;
    background: #f99;
}
.col {
    margin: 0 0 0 8px;
    display: inline-block;
    width: 40%;
    position: relative;
    vertical-align: top;
    background: #999;
    height: 100%;
}
.col:first-child {
    margin: 0;
}
.item {
    display: block;
    position: relative;
    top: 0;
    margin: 12px 0 0 0;
    min-height: 80px;
    width: 100%;
    outline: 4px solid black;
}
.item:first-child {
    margin: 0;
}
.item.large {
    min-height: 120px;
    height: 100%;
}
.item.red {
    background: #f00;
}
.item.blue {
    background: #0f0;
}
.item.green {
    background: #00f;
}

<div class="row">
    <div class="col">
        <div class="item red"></div>
        <div class="item blue"></div>
    </div>
    <div class="col">
        <div class="large item green"></div>
    </div>
</div>

Answer 1

这可以通过使用flexbox来实现:

• 将display: flex; 添加到.row。这告诉它的 child 使用 flexbox 模型
• 添加 flex-direction: row; 到 .row 因为我们希望 child 水平对齐
• 将display: flex; 添加到.col。这告诉它的 child 使用 flexbox 模型
• 将 flex-direction: column; 添加到 .col 中，因为我们希望子项垂直对齐
• 将 flex: 1; 添加到 .item 以允许它增长并在需要时填充可用空间
• 许多样式可以从您的原始版本中删除，因为在使用 flexbox 时不再需要它们

.row {
    background:#f99;
    display: flex;
    flex-direction: row;
}
.col {
    background: #999;
    display: flex;
    flex-direction: column;
    margin:0 0 0 12px;
    width:40%;
}
.col:first-child {
    margin:0;
}
.item {
    flex: 1;
    margin: 12px 0 0 0;
    min-height: 80px;
    outline:4px solid black;
    width: 100%;
}
.item:first-child {
    margin:0;
}
.item.red {
    background:#f00;
}
.item.blue {
    background:#0f0;
}
.item.green {
    background:#00f;
}

<div class="row">
    <div class="col">
        <div class="item red"></div>
        <div class="item blue"></div>
    </div>
    <div class="col">
        <div class="large item green"></div>
    </div>
</div>

flexbox 支持非常好，尽管旧版本的 IE 不支持它。 http://caniuse.com/#feat=flexbox