Equal Height 2.0
Created Tuesday 16th of September 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)
What it Does
This plug-in makes HTML-elements equal height by adjusting their min-height CSS properties. Of course IE6 has no clue what min-height means so the plug-in uses height for that crappy old dinosaur.
How to Use
jQuery('#content, #secondary-content').equalHeight(); would make the elements with IDs 'content' and 'secondary-content' equal height.
Example
Hi
Hi
Bye!
Example Code
HTML
<div id="jquery-equal-height-example">
<p>Hi</p>
<p>Hi<br />Bye!</p>
</div>
JS
jQuery('#jquery-equal-height-example p').equalHeight();
Source Code
jQuery.fn.equalHeight = function () {
var height = 0;
var maxHeight = 0;
// Store the tallest element's height
this.each(function () {
height = jQuery(this).outerHeight();
maxHeight = (height > maxHeight) ? height : maxHeight;
});
// Set element's min-height to tallest element's height
return this.each(function () {
var t = jQuery(this);
var minHeight = maxHeight - (t.outerHeight() - t.height());
var property = jQuery.browser.msie && jQuery.browser.version < 7 ? 'height' : 'min-height';
t.css(property, minHeight + 'px');
});
};