Setting equal CSS heights using jQuery.

Chris Ergatides — Thu, 02 Jul 2009 11:18:49 +0000

I recently needed to do this and found a solution over at filament group, however, I wanted the flexibility to specify the elements to work with.

This is what I came up with:

(function($) {
    $.equalHeight = function(element) {
        var maxHeight = 0;
        $.each(element, function() {
            if ($(this).height() > maxHeight) {
                 maxHeight = $(this).height();
            }
        });
        $.each(element, function() {
            $(this).height(maxHeight);
        });
    }
})(jQuery);

And an example of usage:

var obj = {
    one:$("#pinned .content"),
    two:$("#top10 .content")
};
$.equalHeight(obj);

Demo:

No related posts.

Personal blog of Chris Ergatides » jQuery

Setting equal CSS heights using jQuery.