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

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, e.g. 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!

@ManojKumar In the example (fiddle) the red container is higher than the green container. Maybe you need to reduce your browsers width, to be able to see the issue. — Mr. B., Sep 24 '15 at 15:17

score 1 · Accepted Answer · answered Oct 03 '15 at 10:00

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

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

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.

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

2 Answers2