Menu Close

How to Create Equal Height Elements / Columns using jquery

Roja Bharathi
equal-height

In this topic, we’re going to show you how you can set all elements with a particular class to the highest element height. To do this, we need to loop through all elements with a particular class, get the highest value, then match all other elements to the same height. We can do this using jQuery as follows:

var maxHeight = 0;

$(".some-element").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(".some-element").height(maxHeight);

Awesome, we now have set all elements to the same height. We can take this one step further as elements can change in max height when you are shrinking the browser width for example. What we can do here is use the resize function to update the values.

To make things easier, we can create a function, then call the function both on page load and within the resize function as follows:

var maxHeight = 0;

function matchMaxHeight() {
	$(".some-element").each(function(){
	   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
	});

	$(".some-element").height(maxHeight);
}
matchMaxHeight();
$(window).resize(function() {
	matchMaxHeight();
});
Popular Posts
Total Views: 105
Posted in jQuery, Web Technologies
Tagged , , , ,

You can also read...