How to increase bootstrap column height to 100% row height?

Question

I have not found a suitable solution for this and it seems so trivial.

I have two columns inside a row:

<div class="row"> <div class="col-xs-9"> <div class="left-side"> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> </div> </div> <div class="col-xs-3"> <div class="something">asdfdf</div> </div> </div> 

Line height is set by a larger line, left-side . However, I want the height of the right side to be the same.

It seems intuitive, but it does not work

 .left-side { background-color: blue; } .something { height: 100%; background-color: red; } .row { background-color: green; } 

http://jsfiddle.net/ccorcos/jz8j247x/

Answer 1

You can solve this using the display table.

Here is the updated JSFiddle that solves your problem.

CSS

 .body { display: table; background-color: green; } .left-side { background-color: blue; float: none; display: table-cell; border: 1px solid; } .right-side { background-color: red; float: none; display: table-cell; border: 1px solid; } 

HTML

 <div class="row body"> <div class="col-xs-9 left-side"> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> </div> <div class="col-xs-3 right-side"> asdfdf </div> </div> 

Answer 2

The @Alan answer will do what you are looking for, but this solution fails when you use Bootstrap's flexible features. In your case, you use xs sizes so you don't notice, but if you used anything else (e.g. col-sm , col-md , etc.), you would understand.

Another approach is to play with fields and padding. See the updated script: http://jsfiddle.net/jz8j247x/1/

 .left-side { background-color: blue; padding-bottom: 1000px; margin-bottom: -1000px; height: 100%; } .something { height: 100%; background-color: red; padding-bottom: 1000px; margin-bottom: -1000px; height: 100%; } .row { background-color: green; overflow: hidden; }