Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
js
 
 
 
 
 
 
 
 

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

About

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.

Resources

License

Releases

No releases published
You can’t perform that action at this time.