Equal Element Height Using jQuery

I’m having a bit of a love affair with jQuery, the Javascript library, at the moment. I know my way around JS but am far from an expert, so jQuery’s equal element height using jQuery syntax is a godsend for me, and provides huge savings in my development time.

One quick technique to make equal element height using jQuery; it’s very simple and won’t cope with dynamic content, but is perfectly suitable for simple page layouts.

The code simply takes the elements involved (I’m using two in this example), calculates the height of the tallest, and sets the heights of the others to match:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>
 $(document).ready(function(){
	var highestCol = Math.max($('.example-css-class').height(),$('.example-css-class').height());
	$('.example-css-class').height(highestCol);
});
</script>

$(document).ready(function(){

var highestCol = Math.max($('.example-css-class').height(),$('.example-css-class').height());

$('.example-css-class').height(highestCol);

});

</script>

I hope you enjoy the equal element height using jQuery post, and would love for you to share in the comments section your thoughts!

Equal Element Height Using jQuery

Want to write for CSS Matter?

Get Updates On Twitter

Subscribe to the RSS feed Today