Question

Basically

i have few divs with flexible height and fixed paddings so its being pretty difficult to have them all with same height,

i am trying 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 header is not allways the highest, so i need to

• check wich one is higher (considering that there are more than one .content elements)

• apply outerHeight
  to all of them

but i can’t find a good/beautifull way (have one solution but i need to many if’s and variables) to do this

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 the most of those divs are in display:none is that the problem?

Answer 1

Instead of adding display none, give them the class “hide” 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));
});