var maxHeight = 0;
$("div").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);
Equalize Heights of Divs
Chris Coyier
on
I don’t know why. it work offline but when I put the site to the server it make the height small than the content. And sometimes it change the height with browsers reload in Safari or Firefox.
I think, that’s because your page is not fully loaded. Try to start this code after window is loaded.
Interestingly enough, I experienced the same issue. Worked great on the hard drive, but when I uploaded the files to the server, for some reason the script didn’t work in the same manner. It actually set the height for each div to the height of the first.
…at least until I refreshed.
Gotta love the browser cache.
this is sooo good! thank you!
…actually I do have a small question. How do you implement this on multiple divs?
for example I have 3 sets of 2 divs on a page. I only want the sets to equalize, not all divs on the page. I don’t mind the using multiple classes but whats the shortest way to write it.
div.equalize-1, div.equalize-2, div.equalize-3 are my classes.
I assigned these classes to each set of divs I want to be equalized.
Any tips would be great thanks.
Woops, gotta replace the following line:
Forgot to use the “$this” var!
Your plugin version doesn’t work quite right I think – it appears to be applying the current maxHeight BEFORE it has looped through all the selectors, so its only correct for things after the tallest one.
The original version is fine, though
Thanks Chris this is so easy I would have invented it myself
This is really important stuff to make the layout work. Sorry for being so new to JS, but I have two divs I need to equalize to the same height. In CSS, I call my div ids #slides and #product. Do I just insert that in the parentheses like this? It doesn’t seem to do anything.
Thank you,
var maxHeight = 0;
$(‘#slides’).each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(‘#product’).height(maxHeight);
Could someone help me to understand how to fill in the blanks? I have two divs side-by-side: #slideshow and #menuVertical that I wrap in .equalize. I just can’t figure out where to put these in the plugin.
Thanks Much.
Will this work on resize of the browser?
This is an old post, but I’ve been able to do this in the one line, while setting the variable.
var h = Math.max.apply(Math, $.map($(‘.el’),function(el){return $(el).height()}));
$(“.equalize”).css({‘height’:$(“.equalize”).height()})
Used this snippet. Thank you for making it available!
I had to extend this a bit because I’m using it in the context of a responsive design. So thanks to a Stack Overflow answer, I got my script to trigger when the user pauses or stops resizing the window.
Figured someone else might have the same issue so I thought I’d share!
@Chris:
Your plugin-version is incorrect: if a following box is higher, only this one and all following boxes will be resized.
Here’s an extension to equalize only specific elements inside a specific container:
I modified the plugin and it works fine to me.
Hi john, I use your code. It work for
$(‘.equalize’).equalize();
but not work for
$(‘div.equalize-1, div.equalize-2, div.equalize-3’).equalize();
Hi,
I used the same function but it doe not work in foirst attempt.
I need to refresh the website to see it working.
should I use document.ready or window.onload.
why does this problem occur on server in website. is the code arrangement causing problem
I’m using the below, I do this both in document.ready and window.resize
It works most of time, but rarely doesn’t.. anything to do with browser cache?
http://codepen.io/vikired/pen/QEaKav
wow! this saves me a lot of time when wrapping float breaking my div because of unequal heights. Thank you for making this available!
For anyone looking for a working responsive solution which fixes the issue mentioned by Robert then this should do the trick! Note that all elements you want to be the same height must have the same class (.same-height).
If you want another section of elements on the same page to use this function you must use another class on those elements (.same-height2) and so on…
The (.same-height) class will only work over 700px screen width. There’s rarely a case where you would want all elements to be the same height under this screen size, unless the elements are still in a row.
If you want the elements to be the same height on mobile too then just use the class (.same-height-all). “all” meaning “all screen sizes”.
Here is an example of how to use it:
And here is the code to paste in your js file:
This is the only one that worked for me. Worked perfect thanks! Nice touch excluding mobile since everything stacks up in that layout
For responsive site:
I think you can add $(“div”).removeAttr(“style”); at the start of the code while adding resize event listener. So that the value of height will reset while the window resize.
it worked so easily, just replaced my class name and it worked. Thankyou.
P.S. You could add explanation for beginners even if it’s easy.