Set Elements to Equal Heights with jQuery

Sunday, April 11th, 2010 | jQuery | 0 comments

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

 

Heyyyyy, Leave A Comment!

Submit