Wednesday, January 7, 2015

Check How to Equalize Div Height With Using jQuery

Check out the code below which is used to equalize the height of multiple div elements.

Equalize Div Height With Using 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);
})

Here, I have created a variable with the zero value. Then, it is looping by 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. So, with using this way, we will get the height of the tallest div. At last, I assigned that value as height to all div elements with  class .container. 

0 comments:

Post a Comment