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.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
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;.
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