Equalize Heights of Divs

var maxHeight = 0;

$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);

Comments

  1. User Avatar
    Sgobin
    Permalink to comment#

    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.

    • User Avatar
      Ramil
      Permalink to comment#

      I think, that’s because your page is not fully loaded. Try to start this code after window is loaded.

  2. User Avatar
    Michael Hogenmiller
    Permalink to comment#

    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.

    • User Avatar
      Michael Hogenmiller
      Permalink to comment#

      …at least until I refreshed.

      Gotta love the browser cache.

  3. User Avatar
    Josh
    Permalink to comment#

    this is sooo good! thank you!

    • User Avatar
      Josh
      Permalink to comment#

      …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.

  4. User Avatar
    Chris
    Permalink to comment#
    // Plugin
    $.fn.equalize = function() {
    	var maxHeight = 0;
    	
    	return this.each(function(){
    		var $this = $(this);
    		
    		if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    		
    		$this.height(maxHeight);
            });
    };
    
    
    // Use generic class 
    $('.equalize').equalize();
    
    OR
    
    $('div.equalize-1, div.equalize-2, div.equalize-3').equalize();
    
    • User Avatar
      Chris
      Permalink to comment#

      Woops, gotta replace the following line:

      if ($this.height() > maxHeight) { maxHeight = $this.height(); }

      Forgot to use the “$this” var!

  5. User Avatar
    Toby Stokes
    Permalink to comment#

    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

  6. User Avatar
    Mattia
    Permalink to comment#

    Thanks Chris this is so easy I would have invented it myself

  7. User Avatar
    Eric
    Permalink to comment#

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

  8. User Avatar
    Eric
    Permalink to comment#

    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.

  9. User Avatar
    Adam
    Permalink to comment#

    Will this work on resize of the browser?

  10. User Avatar
    Derek

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

  11. User Avatar
    Raviraj
    Permalink to comment#

    $(“.equalize”).css({‘height’:$(“.equalize”).height()})

  12. User Avatar
    Brendan
    Permalink to comment#

    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!

  13. User Avatar
    Robert
    Permalink to comment#

    @Chris:
    Your plugin-version is incorrect: if a following box is higher, only this one and all following boxes will be resized.

    $.fn.equalize = function() {
        var maxHeight = 0;
        this.each(function(){
            if( $(this).height() > maxHeight ) {
                maxHeight = $(this).height();
            }
        });
        this.height(maxHeight);
    };
    $('div').equalize();
    
    • User Avatar
      Robert
      Permalink to comment#

      Here’s an extension to equalize only specific elements inside a specific container:

      $.fn.equalize = function(toBeEqualizedChildSelector) {
          var maxHeight = 0;
          this.find(toBeEqualizedChildSelector).each(function(){
              if( $(this).height() > maxHeight ) {
                  maxHeight = $(this).height();
              }
          });
          this.find(toBeEqualizedChildSelector).height(maxHeight);
      };
      $('#menu').equalize('.children');
      
  14. User Avatar
    JOHN

    I modified the plugin and it works fine to me.

    $.fn.equalize = function(){
        var maxHeight = 0;
        this.each(function(){
            var $this = $(this);
            if($this.height() > maxHeight){maxHeight = $this.height();}
        });
    
        return this.each(function(){
            $(this).height(maxHeight);
        });
    };
    
  15. User Avatar
    yogendra
    Permalink to comment#

    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

  16. User Avatar
    Viki
    Permalink to comment#

    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?

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag