html - 如何将一个div放置到它的父div的高度

Question

使用 Bootstrap 3.0.2。想要将一个 div 拉伸(stretch)到它的父 div 的高度。对使用脚本设置不感兴趣。有什么办法吗？请看 fiddle 。在这里，我想将蓝色容器拉伸(stretch)到父绿色容器的高度。

See Fiddle

<div class="row border-green">
    <div class="col-xs-6">
        <div class="border-red">
            aaaa<br>
            bbbb<br>
            cccc
        </div>
        <div class="border-red">
            dddd
        </div>
    </div>
    <div class="col-xs-6 border-blue">
        eeee<br>
        ffff<br>
    </div>
</div>

Answer 1

给你的父 div 一个类:equal-height

将此添加到您的 CSS:

.equal-height {
    display: table;
}
.equal-height > div {
    display: table-cell;
    float: none;
    vertical-align: top;
}

http://jsfiddle.net/jpes2wry/3/