Easily match-up heights across a set of non-linear elements. Allows for multiple sets. Each set has min-height defined by the tallest member element.
HTML JavaScript CSS
Latest commit 1f5e0ab Dec 18, 2016 @2kool2 Reordered text
Permalink
Failed to load latest commit information.
css
js
README.md
index.html
license.md

README.md

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