How to create same height HTML block using jQuery?

Hi Friends, If you are facing HTML block height related responsive issue then you can use given below HTML to make all boxes in a same height

CSS

<style type="text/stylesheet">
div.box {
float: left;
width: 23%;
background: #ccc;
margin: 10px 1%;
padding: 1%;
}
@media all and (max-width: 900px) {
div.box {
width: 48%
}
</style>

JS

equalheight = function(container){
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(container).each(function() {
$el = $(this);
$($el).height('auto')
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0;
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}
$(document).ready(function() {
// here #mainsec is the main parent div and box it's child div
equalheight('#mainsec .box');
});
$(window).on('resize',function(){
// here #mainsec is the main parent div and box it's child div
equalheight('#mainsec .box');
});

HTML

You can also watch my video for live demo and share with your friends. [youtube https://www.youtube.com/watch?v=cOraIXEqPPw] Enjoy Code!!