Version 1.5.2

Simple jQuery plugin to equalize heights of multiple elements on a page.

Matt Banks ( @mattbanks / kernelcreativemedia.com / mattbanks.me )

Include jquery.equalheights.min.js after calling jQuery in the footer. Alternatively, include in your plugins.js file if using HTML5 Boilerplate.

Alternatively, install with bower:

bower install jquery.equalheights

Add data-equal="MYELEMENTS" to the parent container, where MYELEMENTS is div, section, li, whatever you'd like. See the example for more information.

$('.yourelements').equalHeights();

Select whatever elements need equal height.

If using @font-face or Google Web Fonts, you may need to wrap the function call in a setTimeout for 100ms-200ms (jQuery.height() needs to fire after the font is rendered to properly calculate the height).

Tested with jQuery 1.7.x.

Works in IE6+, Chrome 14+, Safari 4+, Firefox 3.0+, Opera 10+.

See example.html in examples folder.

• betweenbrain
• Korri
• pafnuty

• version bump for bower

• fix bug with $.height() in jQuery 1.8+ with double padding when box-sizing is set to border-box

• added Grunt for linting and minification
• change auto-initialization to use a single data attribute (props pafnuty)

• allow multiple data-heights elements per page (props Korri)

• add bower support

• allow auto initialization with data-heights and data-targets (props betweenbrain)

• properly return the jQuery object to allow chaining

• properly cache $(this) since it's called twice in the main function
• calculate height by innerheight() instead of height() to include any padding

• cleaned up function call
• updated example.html to properly validate

• initial version