In some design we have to use common height for same DIV. Some way we can use min-height using through CSS but it might not work when one of the div content will grow. So I search through Google and find some Jquery script.

Step 1 :- We have to first write this function :

function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}

Step 2 :- We have to call this function in the document Ready -

$(document).ready(function() {
equalHeight($(“.sample”));
equalHeight($(“.sample2″));
});

But I face some difficulties using like this. In safari browser script is not working properly. Also if we have a multiple div’s we have to call the div id or class one by one. So I modified the script a little bit and its working fine on all browsers. So for doing that we have to give the script like this.

$(window).load(function(){
var classArr = [".sample", ".sample1", ".sample2",".sample3"];

for(var i=0;i<classArr.length;i++)

{
equalHeight($(classArr[i]));
}
});

In this way we can use multiple equal height div in a array. Also perfectly working on all Browsers