Dynamically make DOM element height equal

Most of the time we encounter a situation where our layout is disturbed due to uneven heights of the divs, spans or other elements having varying amount of content. This causes them to have variable height which in turn results in broken layout.

A quick and simple fix for such problem can be adjusting the height with javascript or jQuery.

assuming that our  content is enclosed in div having class “variable-height”, following script should do the trick

$(window).load(function(){
var maxHeight = Math.max.apply(null,
    jQuery(".variable-height").map(function(){
        return $(this).height();
    }).get());
$(".variable-height").height(maxHeight);
});