Bootstrap: How to get a column with 100% the height of another column

Question

I have this kind of structure: (this is bootstrap 3 but it should be the same with version 2.x)

enter image description here

Pretty basic stuff, looking like a table. I want this col-lg-4 on the right to have the same size as the col-lg-8 on the left. I tried style="min-height: 100%" (which obviously didn't work since I'm asking here). I've been doing some research, but most of the people asking for the same issue want their whole content to be 100% of the page. I want this to be 100% of the left div in the same row. I don't even get why it's not working, the 100% should apply to the height of the outer row, which is the exact height that I need (the outer row has no padding, the image just looks like this for a better overview of the grid)

• BrOSs: I'm not an expert, but may be using offset?
• feitla: Can you please make a FIDDLE
• David Taiaroa: Check the accepted answer @ stackoverflow.com/questions/9143971/…

Answer 1

If you are familiar with jQuery...This has worked for me in the past. Just pass the group of colomns to this function.

function equalHeight(group) {
 tallest = 0;
 group.each(function() {
 thisHeight = $(this).height();
 if(thisHeight > tallest) {
 tallest = thisHeight;
 }
 });
 group.height(tallest);
}

use like this...

$(document).ready(function(){
 equalHeight($('.cols'));
});