CSS/Bootstrap: Как растянуть контейнеры внутри cols full-height?

Question

Я использую простой Bootstrap-Grid: один ряд, два col-md-6-columns. Внутри каждой колонки у меня есть контейнер class="box", который должен использовать height of 100%.

Я пробовал разные способы, например. имитируя таблицу и таблицы, но выбрал класс .row-eq-height, рекомендованный Bootstrap.

Каков общий способ заставить box в пределах col-md-6 растянуться до полной высоты?

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: Я хотел бы, чтобы избежать обертывание 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

Answer 2

CSS solution. удалил прокладку на классе col-md-6. также переместил ваш встроенный стиль bg во внешний контейнер, а не в класс box.

More Reading