Here’s a quick jQuery plugin I put together for equalizing the heights of multiple elements. You give the plugin a list of elements, jQuery then loops through the specified elements, finds the tallest, and sets the height of each element to the tallest one.
(function ($) {
$.fn.equalHeights = function() {
var max_height = 0;
var currentHeight = 0;
this.each(function() {
currentHeight = $(this).height();
if(currentHeight > max_height) {
max_height = currentHeight;
}
});
this.each(function() {
$(this).height(max_height);
});
};
})(jQuery);
Usage
It’s pretty simple, all you have to do is give the plugin a list of elements like so:
$(document).ready(function() {
$("#div-one, #div-two, #div-three").equalHeights();
});
View DemoDownload