Tag Archives: Elements

Use jQuery to make dynamic height containers have the same height

When working with a multi column layout where all three containers with dynamic content, you run into a problem with a css limitation (not able to do heigh: 100%;) so this problem has to be solved by using javascript.

Well, here’s the solution!

First write a function to include into the file (I usually use an external js function file so I can apply any of them anywhere needed.)

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

Then to use it simply use the following code in your document.

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

What this will do is find all elements with the class ‘.your_container’ and make them the same height on the document.
Source: CSS Newbie