Get height from the highest div and apply it to others

Question

Basically

I have several divs with flexible heights and fixed shims, so it's pretty difficult to have them all with the same height,

I try like this:

$(document).ready(function(){ $('.LevelCnt_2,.LevelCnt_2 .content,.LevelCnt_1,.LevelCnt_1 .content').outerHeight( $('header:eq(0)').outerHeight() ); console.log($('header:eq(0)').outerHeight(true)); }); 

But the problem is that the title is not always the highest, so I need

• check which one is higher (given that there is more than one .content element)

• apply external height to all of them

but I can’t find a good / wonderful way (I have one solution, but I need a lot of if and variables).

any clue?

-Edit -

while waiting, I came up with this

 $(document).ready(function(){ var height = 0; $('.LevelCnt_2,.LevelCnt_2 .content,.LevelCnt_1,.LevelCnt_1 .content,header').each(function(){ if($(this).outerHeight() > height){ height = $(this).outerHeight(); } }); $('.LevelCnt_2,.LevelCnt_2 .content,.LevelCnt_1,.LevelCnt_1 .content,header').each(function(){ $(this).outerHeight(height); }); console.log('highest height is '+height); //it doesn't output the highest value }); 

but most of these divs are in display:none , what's the problem?

Answer 1

Instead of adding a none display, give them a "hide" class and use this.

 $(function(){ var height = 0; $('.hide').show(); $('header').each(function(){ height = Math.max( height, $(this).outerHeight() ) }); $('.hide').hide(); $('.LevelCnt_2,.LevelCnt_2 .content,.LevelCnt_1,.LevelCnt_1 .content').outerHeight(height); console.log($('header:eq(0)').outerHeight(true)); }); 

Answer 2

A bit late in the game, but you can use an array:

 var arr = $.makeArray() $('div').each(function(){ arr.push($(this).outerHeight()); }); $('div').css('height', Math.max.apply( Math, arr )); console.log('highest height is '+Math.max.apply( Math, arr )); 

Check out my example - http://jsfiddle.net/ZhG2S/

Answer 3

Try the following:

 $(document).ready(function(){ var headerHeight = getTallestHeaderHeight() $('.LevelCnt_2,.LevelCnt_2 .content,.LevelCnt_1,.LevelCnt_1 .content').outerHeight(headerHeight); console.log(headerHeight); }); function getTallestHeaderHeight() { var maxHeight = 0; $("HEADER").each(function() { if ($(this).outerHeight() > maxHeight) maxHeight = $(this).outerHeight() }) return maxHeight; }