CODEWITHSUNDEEP
javascriptjqueryhtml
Stuart Frisby
Stuart Frisby

Reputation: 23

Matching element heights jQuery/HTML

I have the following construct in my HTML document:

<div class="content">
<section class="column"></section>
<aside class="column"></aside>
</div>

And I want to match the heights of the section and aside to the height of the tallest of the two. I have the following script, but it's not working, any ideas: 

  function unifyHeights()   
    {    
        var maxHeight = 0;    
        $('div.content').children('.column').each(function(){      
        var height = $(this).outerHeight();      
        if ( height > maxHeight ) { maxHeight = height; }    
    });    
    $('.column').css('height', maxHeight);  
  }

Upvotes: 2

Views: 1017

Answers (3)

Marcel Korpel
Marcel Korpel

Reputation: 21763

It looks like nothing was wrong with the function in your question, because both columns get the same height when using this markup and code (taken from your Pastebin example):

<!doctype HTML>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>
function unifyHeights()   
{    
    var maxHeight = 0;    
    $('div.content').children('.column').each(function(){      
        var height = $(this).outerHeight();      
        if ( height > maxHeight ) { maxHeight = height; }    
    });    
    $('.column').css('height', maxHeight);  
}
</script>
<style>
.content {
background-color: yellow;
}
section.column {
    width: 300px;
    float: left;
}
aside.column {
    width: 300px;
    floaT: left;
    display: inline;
}
</style>
</head>
<body>
<div class="content">
    <section style="background-color: pink;" class="column">jldkjfls<br/><br/></section>
    <aside style="background-color: green;" class="column">jldkjfls<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></section>
<script>
    unifyHeights();
</script>
</body>
</html>

Upvotes: 0

lonesomeday
lonesomeday

Reputation: 237845

A nice way to get the maximum of a set of properties is using .map():

$(document).ready(function() {    
    var heights = $('div.content').children('.column').map(function(idx, el) {
        return $(this).outerHeight();
    }).get();

    $('.column').height(Math.max(heights));  
});

Upvotes: 0

ThiefMaster
ThiefMaster

Reputation: 318488

Try using $('.column').css('height', maxHeight + 'px');

BTW, you can replace $('div.content').children('.column') with$('div.content > .column')

Upvotes: 1

Related Questions