CSS / Bootstrap：如何在cols全高范围内拉伸容器？

Question

I'm using the simple Bootstrap-Grid: one row, two col-md-6 -columns. Within each column I've a container class="box" , which should use a height of 100% .

I tried different ways, eg simulating a table and table-cols, but chose the .row-eq-height -class, recommended by Bootstrap.

Whats the common way to force the box within col-md-6 to stretch to full-height?

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%;
}

Live:

http://jsfiddle.net/cmbe4h1h/

Edit: I would like to avoid wrapping the HTML with additional containers (like in many position: relative/absolute -tutorials).

Thanks in advance!

Answer 1

I didn't find a proper CSS solution for my case and switched to

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>

Try it: jsfiddle.net

Answer 2

CSS solution . removed the padding on the col-md-6 class. also moved your bg inline style to the outer container, not the box class.

More Reading