Matching element heights jQuery/HTML

Question

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); }

Did you test if that anonymous function is called twice, with the correct children? Did you look at the values height gets assigned? Does maxHeight increase? — Marcel Korpel
– Marcel Korpel, Commented Nov 11, 2010 at 22:48

ThiefMaster · Accepted Answer · 2010-11-11 22:48:15Z

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

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

Marcel Korpel · Accepted Answer · 2010-11-11 23:21:55Z

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>

lonesomeday · Accepted Answer · 2010-11-11 23:18:40Z

0

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)); });

edited Nov 11, 2010 at 23:18

answered Nov 11, 2010 at 22:52

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

3 Comments

Stuart Frisby Over a year ago

I must be doing something fundamentally wrong since that doesn't work either - can you see in this test document what that might be: pastebin.com/JqfThuQ8

Marcel Korpel Over a year ago

@Stuart: You're not invoking that function at all, and besides, according to my console and api.jquery.com, max is not a function.

lonesomeday Over a year ago

@Marcel No, it isn't -- I thought it was a native JS array method. Editing now...

Collectives™ on Stack Overflow

Matching element heights jQuery/HTML

3 Answers 3

Comments

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Related