Matching Element Heights

Easily match-up heights across a set of non-linear elements.
Allows for multiple sets, with each set having a different height defined by a JavaScript injected inline min-height.

CodePen demo: Matching element heights

Super small vanilla script: Approx 417 bytes minified and gzipped (694 bytes uncompressed) with zero dependencies.

How it works

Add data attribute to the elements you wish to equalise and give it a value: data-matchHeights="A".
Ensure the elements each have display: block;.
Elements must have box-sizing: border-box;.
Then run the script.

All elements with the same data attribute value have the same min-height applied.
The min-height value is equal to the tallest elements height and is recalculated when the browser is resized.

Basic usage

Add data attributes to the elements:

<div data-matchHeights="A">Yada, yada, yada.</div>
&hellip;
<div data-matchHeights="A">Yada.</div>
&hellip;
<div data-matchHeights="A">Yada, yada, yada. Yada, yada, yada. Yada, yada, yada.</div>

Include a link to the script:

<script src="js/matchHeights.1.0.min.js"></script>

Browser support

Tested Mac and PC: IE9+, Chrome, Safari, Firefox.

---

Mike Foskett @ webSemantics