html - CSS/Bootstrap : How to stretch containers within cols full-height?

Question

我使用的是简单的 Bootstrap-Grid:一行，两列 col-md-6。在每一列中，我都有一个容器 class="box"，它应该使用 100% 的高度。

我尝试了不同的方式，例如模拟表格和表格列，但选择了 Bootstrap 推荐的 .row-eq-height 类。

强制 col-md-6 中的 box 拉伸(stretch)到全高的常用方法是什么？

HTML:

<div class="row row-eq-height">
    <div class="col-md-6">
        <div class="box" style="background: red">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.            
        </div>
    </div>
    <div class="col-md-6">
        <div class="box" style="background: green">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        </div>
    </div>
</div>

CSS:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.col-md-6 {
  background: yellow; /* to show the left space */
}

.box {
  height: 100%;
}

直播:

http://jsfiddle.net/cmbe4h1h/

编辑:我想避免用额外的容器包装 HTML(就像许多 position: relative/absolute-tutorials)。

提前致谢!

Answer 1

我没有为我的案例找到合适的 CSS 解决方案并切换到

JS(jQuery):

$('.sameHeightWrapper').each(function() {
    var highestContainer = 0;
    $('.sameHeightContainer', this).each(function() {
        if($(this).height() > highestContainer) {
            highestContainer = $(this).height();
        }
    });
    $('.sameHeightContainer', this).height(highestContainer);
});

HTML:

<div class="sameHeightWrapper">
    <div class="sameHeightContainer c1">
        Container 1<br/>
        ...
    </div>
    <div class="sameHeightContainer c2">
        Container 2<br/>
        ...
    </div>   
    <div class="sameHeightContainer c3">
        Container 3<br/>
        Container 3<br/>
        ...
    </div>   
</div>

试一试:jsfiddle.net