The best way to equalize height of divs/HTML Elements.
Lightweight, responsive, easy-to-use.
HTML Elements can be equalized by simply adding tag inline:
- data-eqHeight=”group_name”
Example:
<div id="main">
<div id="menu" data-eqHeight="group1"></div>
<div id="content" data-eqHeight="group1"></div>
<div id="rightpanel" data-eqHeight="group1"></div>
On page load... all these divs will be as tall as the tallest one.
</div>
<div id="footer">
<div id="footer_left" data-eqHeight="group2"></div>
<div id="footer_right" data-eqHeight="group2"></div>
footer_left and footer_right will also be as tal as the tallest one.
</div>
Equalize using javascript/jquery
<script type="text/javascript">
$(document).ready(function() {
$(".class_to_equalize").equalHeight({
perRow: 0 // Default is 0 (All HTML Elements will be as tall as the tallest one)
});
});
</script>