Equal Height
Equal Height
Equal Height
Equal Height
Equal Height
Equal Height
Equal Height
Equal Height
Equal Height
Equal Height
Equal Height
Equal Height
Equal Height
Equal Height
<head>
<style>
* {
box-sizing: border-box;
}
body {
background: -webkit-linear-gradient(top, #eee, rgba(222,112,6,0.2), #de7006),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…N0eWxlPSdmaWxsOiNlMDg3Mjg7ZmlsdGVyOnVybCgjZmlsdGVyMzExNSknIC8+Cjwvc3ZnPg==);
background: linear-gradient(to bottom, #eee, rgba(222,112,6,0.2), #de7006),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…N0eWxlPSdmaWxsOiNlMDg3Mjg7ZmlsdGVyOnVybCgjZmlsdGVyMzExNSknIC8+Cjwvc3ZnPg==);
overflow-x: hidden;
}
.blocks {
float: left;
width: 100%;
}
.block {
float: left;
width: 20%;
background: #ffa;
padding: 10px;
margin: 10px;
text-align:center;
color:#000 !important;
}
</style>
<script type=”text/javascript”>
function heightsEqualizer(selector) {
var elements = document.querySelectorAll(selector),
max_height = 0,
len = 0,
i;
if ( (elements) && (elements.length > 0) ) {
len = elements.length;
for (i = 0; i < len; i++) { // get max height
elements[i].style.height = ”; // reset height attr
if (elements[i].clientHeight > max_height) {
max_height = elements[i].clientHeight;
}
}
for (i = 0; i < len; i++) { // set max height to all elements
elements[i].style.height = max_height + ‘px’;
}
}
}
if (document.addEventListener) {
document.addEventListener(‘DOMContentLoaded’, function() {
heightsEqualizer(‘.js-equal-height’);
});
window.addEventListener(‘resize’, function(){
heightsEqualizer(‘.js-equal-height’);
});
}
setTimeout(function () { // set 1 second timeout for having all fonts loaded
heightsEqualizer(‘.js-equal-height’);
}, 1000);
</script>
</head>
<body>
<div class=”blocks”>
<div class=”block js-equal-height”>
Equal Height<br />
Equal Height<br />
</div>
<div class=”block js-equal-height”>
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
</div>
<div class=”block js-equal-height”>
Equal Height<br />
Equal Height<br />
Equal Height<br />
</div>
<div class=”block js-equal-height”>
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
</div>
</div>
</body>
</html>