How to make outer columns same height with nested bootstrap grids

Question

I have a dynamic bootstrap 3 layout with nested grids which is working the way I want for all screen sizes, except that I can't figure out how to fill the vertical space so that the top-level columns are the same height.

Here's an image of the problem for a medium screen (sorry, not enough rep to embed images): Nested bootstrap vertical height problem. I want the "LEFT BOX" and "RIGHT BOX" to extend down to the "Bottom Bar".

I have tried the solutions posted here: How can I make bootstrap columns all the same height and various other places, but none of them seem to work with nested grids.

Any help greatly appreciated.

I have put a sample on on Fiddler which looks like this:

CSS:

.container {
    margin-top: 10px;
}

.dark {
    background: #444;
    color: #DDD;
}

.light {
    background: #DDD;
    color: #222;
}

.content {
    padding: 30px;
    margin: 0;
}

.image {
    width: 100%;
    padding: 0;
    margin: 0;
    vertical-align: bottom;
}

HTML:

<div class="container">
<div class="row">
    <div class="col-sm-8">
    <div class="row">
        <div class="col-md-12 dark image">
        <img src="https://s20.postimg.io/kdweqmuzx/postimage.gif" width="100%" />
        </div>
        <div class="col-md-6 dark content">
        <h2>LEFT BOX</h2>
        <br />
        <br />
        <br />
        </div>
        <div class="col-md-6 light content">
        <h2>RIGHT BOX</h2>
        <br />
        <br />
        <br />
        </div>
    </div>
    </div>
    <div class="col-sm-4 dark">
    <div class="row">
        <div class="dark content">
        <h2>RIGHT PANEL</h2>
        </div>
    </div>
    <div class="row">
        <div class="dark image">
        <img src="https://s20.postimg.io/5cu49dca5/postimage.gif" width="100%" class="bottom" />
        </div>
    </div>
    </div>
</div>
<div class="row dark">
    <div class="col-sm-12 dark content">
        <h2>Bottom Bar</h2>
    </div>
</div>
</div>

score 1 · Accepted Answer · edited May 23 '17 at 11:48

I was able to get this working using a modified version of the extra margin/padding/overflow trick described here: How can I make bootstrap columns all the same height

As it stands that solution will not work with nested grids because if you apply overflow:hidden to all rows, then it will clip the extra padding on the inner row.

Instead, I put the overflow:hidden on the top-level container, and now it works! FYI I also tried putting overflow:hidden on the content class, and it had the desired effect in Chrome, but not Firefox or Edge.

Example on JsFiddle: http://jsfiddle.net/jccaulfield/ggjwwuup/3/

.container {
overflow: hidden;
}

.dark {
background: #444;
color: #DDD;
}

.light {
background: #DDD;
color: #222;
}

.content {
padding: 30px;
margin: 0;
margin-bottom: -999px;
padding-bottom: 999px;
overflow: hidden;
}

.image {
padding: 0;
margin: 0;
}

How to make outer columns same height with nested bootstrap grids

1 Answers1