fix column height issue to be the same despite of the content inside
HTML:
<div class="container">
<div class="column column-1">
<div class="column-header">
<h3>Lorem ipsum dolor sit amet</h3>
</div>
</div>
<div class="column column-2">
<div class="column-header">
<h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
</div>
</div>
<div class="column column-3">
<div class="column-header">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</div>
</div>
</div>
CSS:
.container {
width: 650px;
height: 650px;
border: solid 1px red;
.column {
width: 30%;
height: 90%;
border: 1px solid blue;
float: left;
margin-top: 5%;
margin-left: 1%;
.column-header {
background: gray;
border: solid 1px black;
}
}
}
jQuery:
var handleResize = function () {
var maxHeight = 0;
$(".column-header").css("height", "initial");
$(".column-header").each(function () {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$(".column-header").height(maxHeight);
};
$(window).resize(handleResize);