Equalize div height with jQuery

Here’s a handy jQuery code snippet which can be used to equalize the height of multiple div elements.

See Also: Add/Remove Input Fields Dynamically with jQuery

//Equalize div height with jQuery
$(document).ready(function(){
    var tallest = 0;
    $('.container').each(function(){
        if($(this).height() > tallest){
            tallest = $(this).height();
        }
    })
    $('.container').height(tallest);
})

As you can see, we have created a variable tallest with value zero. Then, we are looping through each div with class .container to compare its height with the value stored in tallest. If the height of a div is greater than value stored in tallest, the value in tallest will be replaced with that value. In this way, we will get the height of the tallest div. Then at the end we are assigning that value as height to all div elements with  class .container.

0 Comments

Leave a Comment.