Question

I have this jQuery script which make my two divs the same height:

$(document).ready(function () {    
    var $sameHeightDivs = $('.sameh');
    var maxHeight = 0;
    $sameHeightDivs.each(function() {
        maxHeight = Math.max(maxHeight, $(this).outerHeight());
    });

    $sameHeightDivs.css({ height: maxHeight + 'px' });
});

I have two divs:

<div class="sameh">div 1</div>
<div class="sameh">div 2</div>

The problem is, that div 1 is loaded first (I think that is the problem), and actually DIV2 is higher than DIV1. But the script just makes these two divs same height, which will make DIV2 same height as DIV1.

How can I do, so DIV1 is following the height of DIV2?

Thanks.

Answer 1

You could get the max height from all of the elements and then apply that to the others :

// get the max height of a collection of elements using map
var maxHeight = Math.max.apply(null, $(".sameh").map(function ()
{
    return $(this).outerHeight();
}).get());
// set all divs to the same height
$('.sameh').css({ height: maxHeight + 'px' });

Working example here and
Docs on .map() here