html - 如何让 div 占用父级的剩余高度？

Question

JsFiddle Demo

我在容器中有 2 个 div(实际上我将第一个标记为 h1)，我希望第二个 div 占用其父 div 的剩余空间。执行 height:100% 会使其使用其父级高度的 100%，因为另一个 div 而导致它比父级大。在演示中，您可以看到蓝色穿过灰色。

如何告诉它使用剩余高度？ HTML 可能会改变，但尽量不要变得疯狂

HTML:

<div class="outer_box">
    <div class="container">
         <h1>Title</h1>

        <div class="box">Box</div>
    </div>
    <div class="container">
         <h1>Title</h1>

        <div class="box2">Box</div>
    </div>
</div>

CSS:

.outer_box {
    height: 500px;
}
.container {
    width: 30%;
    height: 100%;
    background-color: grey;
    float:left
}
.box {
    background-color: blue;
    height: 100%;
}
.box2 {
    background-color: green;
}

Answer 1

您可以执行 CSS 表格布局，并将 box 设置为 height:100% 以将标题推到其最小高度。

http://jsfiddle.net/0w7pqeo6/3/

.outer_box {
    height: 300px;
}
.container {
    width: 30%;
    height: 100%;
    background-color: grey;
    float: left;
    display: table;
}
.container h1, .container > div {
    display: table-row;
}
.box {
    background-color: blue;
    height: 100%;
}
.box2 {
    background-color: green;
    height: 100%;
}

<div class="outer_box">
    <div class="container">
         <h1>Title</h1>
        <div class="box">Box</div>
    </div>
    <div class="container">
         <h1>Title</h1>
        <div class="box2">Box</div>
    </div>
</div>