Puddinq.com sharing knowledge

jQuery make divs equal height

jQuery make divs equal height

This little script can be run agains classes so all all items with that class are of equal hight.

Sometimes it is impossible to make different items the same hight with css as the elements are flexibel and the size depends on the contents. The script looks at the heights of all items after loading and sets the height for each element based on the hight of the longest.

function equalHeights(items, outer) {
    var maxHeight = 0;
    jQuery(items).each(function() {
    	jQuery(this).css("height", "");
        if (outer == true) {
            oHeight = jQuery(this).outerHeight();
        } else {
            oHeight = jQuery(this).height();
        }
        if (oHeight > maxHeight) {
            maxHeight = oHeight;
        }
    });
    jQuery(items).height(maxHeight);
    return false;
};

equalHeights('.your-items', true);