Dependency free package to keep HTML elements with equal height!
Hey, maybe you even don't need any extra package to control this behaviour. If you can you should use flexbox
, just add this css...
section {
display: flex;
}
Tada! All blocks inside section should have equal height.
bower install equalizer
npm install equalizer
Equalizer is small JavaScript file. Sometimes you need to keep some block with equal height, e.g all divs in row. Equalizer gets maximum height and set it to all blocks as min-height property.
After import equalizer directly in HTML it will expose in global variable named Equalizer
<script src="/path/to/script/equalizer.min.js"></script>
<script>
var eq = new Equalizer('.row .align');
eq.align();
// or
var blocks = document.querySelectorAll('.row .align');
var eq2 = new Equalizer(blocks);
eq2.align();
</script>
var Equalizer = require('equalizer');
var eq = new Equalizer('.row .align');
eq.align();
requirejs(['equalizer'], function(Equalizer) {
var blocks = new Equalizer('.row .align');
blocks.align();
});
Equalizer('.row .align').align();
The MIT License. Copyright © 2014 - 2016 Szymon Krajewski.