Match the Heights of Multiple Elements with jQuery

When it comes to responsive grid-based layouts, we often find the need to match the heights of multiple columns or boxes that are all in a row. In these cases, a css height property won’t do the trick for a couple reasons.

1. The content will likely be dynamic, and will change depending on the given day, week or month.
2. Since the site is responsive, you would need to add the height property at more breakpoints than are reasonable (and if #1 is correct, they would change often).

And that’s where jQuery comes in.

Your HTML markup should look something like:

<div class="matchHeights"><!-- This is our row -->
    <div class="height"></div><!-- These are the elements we want equalized -->
    <div class="height"></div>
    <div class="height"></div>
</div>

You can use whatever elements you want, just ensure that the wrapping element has a class matchHeights and the elements that you want equalized have a class height applied.

And now for the JavaScript:

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

[codepen_embed height=”398″ theme_id=”0″ slug_hash=”bivJr” default_tab=”result”]See the Pen bivJr by Andrew Carlson (@aicarlson) on CodePen.[/codepen_embed]

This particular function would work with two scenarios. If you have multiple rows that need equalized heights, this will set the height of each independently. It will also work just fine if you only have a single row of elements that need equal heights.

Here’s how it works:

1. Declare a function name so that we can run the function in the future.
2. For each element with the class matchHeights (this is our row that contains the elements we want to have equal heights) do the following:
3. Create variable elements to hold all of the elements we want equalized.
4. Create placeholder variable height with an initial value of 0.
5. Reset the min-height on the elements we want equalized. This is only necessary if you’re accounting for screens being sized up and down.
6. For each element we want equalized, do the following:
7. If the height of the current element in the foreach iteration is greater than the variable height, then set it’s value to the height variable.
8. After the foreach, set the min-height on all of the elements to be equal to height.

Then it comes down to running the function! If your boxes/columns will contain images, you’ll need to load it after the images have loaded:

$(window).load(function() {
  matchHeights();
});

Otherwise you can just run it after the document is ready:

$(document).ready(function() {
  matchHeights();
});

And then if you want it to resize dynamically when the user resizes their browser:

$(window).resize(function() {
  matchHeights();
});

And there you have it, elements of equal height at any breakpoint, on any device.