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
Switch branches/tags
Nothing to show
Latest commit a468b83 May 20, 2017 @2kool2 Spelling correction
Permalink
Failed to load latest commit information.
css Comment added Dec 18, 2016
js First commit Dec 18, 2016
README.md Spelling correction May 20, 2017
index.html
license.md First commit Dec 18, 2016

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