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
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
Equal Height
Equal Height
Equal Height
Equal Height
<html>
<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>
<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>
No comments:
Post a Comment