Chris C Chris C - 2 months ago 28
CSS Question

How to make outer columns same height with nested bootstrap grids

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>

Answer

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