matching div heights with jQuery

Question

trying to match div heights using jQuery, and it seems I can only get it to match the smallest height, but I want it to match the tallest column. from what I can tell the code should find tallest column? so I am very confused, here is what I am using

function matchColHeights(col1, col2) { var col1Height = $(col1).height(); var col2Height = $(col2).height(); if (col1Height < col2Height) { $(col1).height(col2Height); } else { $(col2).height(col1Height); } } $(document).ready(function() { matchColHeights('#leftPanel', '#rightPanel'); });

trying to do it here: http://www.tigerstudiodesign.com/blog/

Linking to your site is all well and good, but which bits are you trying to match heights? — Bojangles
– Bojangles, Commented Dec 21, 2011 at 20:08
leftPanel and rightPanel could be anything. Also, you don't tell us what to look for when they're not the same height. To me, the page design works fine in FF. Can you provide correct/incorrect screenshots or a diagram or something? — Bojangles
– Bojangles, Commented Dec 21, 2011 at 20:12
how can it be anything? they are in the layout, hah. very specific ID's. I am very confused. anyway, here is a diagram just in case. localhostr.com/files/IijP6y2/… — Lukasz
– Lukasz, Commented Dec 21, 2011 at 20:32
Is there anything that gets loaded after the page is ready? Specifically into the right column? It appears that when this code is initially running the right column is shorter than the left. If you check the true height value after the everything has run it is taller than the left column. Your JS function works fine, there is something up with that right column. — nheinrich
– nheinrich, Commented Dec 21, 2011 at 20:56

Andri · Accepted Answer · 2011-12-21 20:14:14Z

This should be able to set more than one column to maxheight. Just specify the selectors just like you would if you wanted to select all your elements with jQuery.

function matchColHeights(selector){ var maxHeight=0; $(selector).each(function(){ var height = $(this).height(); if (height > maxHeight){ maxHeight = height; } }); $(selector).height(maxHeight); }; $(document).ready(function() { matchColHeights('#leftPanel, #rightPanel, #middlePanel'); });

this seems to be working now at least appending a height, but I need it to grab the max height, this grabs the min height.

c4urself · Accepted Answer · 2011-12-21 20:24:41Z

one line alternative

$(".column").height(Math.max($(col1).height(), $(col2).height()));

Check out this fiddle: http://jsfiddle.net/c4urself/dESx6/

It seems to work fine for me?

javascript

function matchColHeights(col1, col2) { var col1Height = $(col1).height(); console.log(col1Height); var col2Height = $(col2).height(); console.log(col2Height); if (col1Height < col2Height) { $(col1).height(col2Height); } else { $(col2).height(col1Height); } } $(document).ready(function() { matchColHeights('#leftPanel', '#rightPanel'); });

css

.column { width: 48%; float: left; border: 1px solid red; }

html

<div class="column" id="leftPanel">Lorem ipsum...</div> <div class="column" id="rightPanel"></div>

they autogrow, so they have a height. now with the script you get the shorter one to match the taller one, see the fiddle
oh, right. maybe I wasn't being specific, I need to match the taller height as it auto grows. I thought that's what code does? it shouldn't be other way around according to the code, unless I am missing something. I see that it works in the test envoirnment, but for some reason on my site it's not working? :/ maybe a div isn't clearing correctly or something? I'm not sure. cant seem to find the problem

dgvid · Accepted Answer · 2011-12-21 20:19:24Z

When I load your site in Chrome, #leftPanel has a height of 1155px and #rightPanel has a height of 1037px. The height of #rightPanel is then set, by your matchColHeights method, to 1155px.

However, if I allow the page to load, then use the Chrome Developer Tools console to remove the style attribute that sets an explicit height on #rightPanel, its height becomes 1473px. So, your code is correctly setting the shorter of the two columns to the height of the taller at the time the code runs. But subsequent formatting of the page would have made the other column taller.

Hooman Askari · Accepted Answer · 2013-04-09 12:00:40Z

The best tut on this subject could be found here:

http://css-tricks.com/equal-height-blocks-in-rows/

Collectives™ on Stack Overflow

matching div heights with jQuery

4 Answers 4

1 Comment

6 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

6 Comments

Comments

Comments

Related