Set Equal Heights for Divs Using jQuery

If your design is in a tiled layout, or you have a series of blog entries in rows and would like to show the “Read More” buttons below the lead-in text at the same height, this is a pretty straight-forward fix.

function matchHeights() {
  jQuery('.equal_height').each(function() {
    var elements = jQuery(this).find('.height');
    var height = 0;
    elements.css('min-height','0px');
    elements.each(function() {
      height = jQuery(this).height() > height ? jQuery(this).height() : height;
    });
    elements.css('min-height',height+'px');
  });
};

The above function will locate the tallest item in the sequence, and apply it’s height (px) to all of the items.

Sourced here.

Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.