Question

I am drastically trying to find way to make a div 100% height of it’s parent. Only trick is that the parents height is going to be dynamic.

Any ideas on this? I cannot find a solution anywhere?

Answer 1

That’s because there isn’t a clean solution…they’re all hacks. see abcoder

You can use javascript/jquery,

$(function () {
    var maxheight = Math.max.apply(null,$('.col').map(function () {
        return $(this).height();
    }));
    $('.col').height(maxheight);
});

js fiddle — uses box-sizing so that I could put some padding on the columns, but isn’t strictly necessary.

Or you can wrap all your divs in another div, and then use a vertically-tiled background on the containing div to give the appearance that they’re separate columns, even though the inner divs don’t extend all the way down.

Tables or emulated tables (using CSS) will also work.

I think there may be some solutions involving CSS3 these days, however. This answer is from 2011, so use your judgement.