jquery.matchHeights

jquery.matchHeights is a crazy simple jquery plugin to set a group of elements to the same height.

We end up having to do this on a lot of sites to keep things looking neat no matter what user generated content gets added to the site, so it made sense to make it a bit more reusable, and we figured there were other people in the same boat as us, so we made it open source.

Usage

$('.some-css-selector').matchHeights()
            

This will find the tallest of all the items with the provided selector and set all the elements to the same height as it.

$('.some-wrapper-class').each(function () {
    $(this).find('.some-css-selector').matchHeights()
})
            

If your DOM structure is such that all your elements that need to be the same height are siblings you can use the above snippet instead of calling matchHeights on every single group of elements on the page.

Install

Old School

<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.equalheights.js"></script>
            

Bower

$ bower install jquery-equalheights
            

This will install jquery.equalheights and jquery into your bower directory. Include them in your build process however you see fit.

Examples

Basic

HTML

<div class="e1-item item">
    OK. Moss, what did you have for breakfast...
</div>
<div class="e1-item item">
    They just toss us away like yesterday's jam...
</div>
<div class="e1-item item">
    I am a man, he's a man, we're men! Ok...
</div>
<div class="e1-item item">
    Hello, IT. Have you tried turning it off...
</div>
<div class="e1-item item">
    While he was eating, did you hear anyone laughing?...
</div>
<div class="e1-item item">
    Dear Sir stroke Madam. Fire, exclamation...
</div>
            

Javascript

$('.e1-item').matchHeights()

Set all divs of the given class to the same height as the tallest one

Columns

HTML

<div class="equal-height-column">
    <div class="e2-item-1 item">
        OK. Moss, what did you have for breakfast...
    </div>
    <div class="e2-item-2 item">
        They just toss us away like yesterday's jam...
    </div>
    <div class="e2-item-3 item">
        I am a man, he's a man, we're men! Ok...
    </div>
</div>

<div class="equal-height-column">
    <div class="e2-item-1 item">
        Hello, IT. Have you tried turning it off...
    </div>
    <div class="e2-item-2 item">
        While he was eating, did you hear anyone laughing?...
    </div>
    <div class="e2-item-3 item">
        Dear Sir stroke Madam. Fire, exclamation...
    </div>
</div>
            

Javascript

$('.e2-item-1').matchHeights()
$('.e2-item-2').matchHeights()
            

Sets matching divs in different parents to the same height. Handy for equalising items in a column layout. The last items in each column have been left alone to highlight that not only specified elements are equalised.

Siblings

HTML

<div class="equal-height-wrapper">
    <div class="e3-item item">
        OK. Moss, what did you have for breakfast...
    </div>
    <div class="e3-item item">
        They just toss us away like yesterday's jam...
    </div>
    <div class="e3-item item">
        I am a man, he's a man, we're men! Ok...
    </div>
</div>

<div class="equal-height-wrapper">
    <div class="e3-item item">
        Hello, IT. Have you tried turning it off...
    </div>
    <div class="e3-item item">
        While he was eating, did you hear anyone laughing?...
    </div>
    <div class="e3-item item">
        Dear Sir stroke Madam. Fire, exclamation...
    </div>
</div>
            

Javascript

$('.equal-height-wrapper').each(function () {
    $(this).find('.e3-item').matchHeights()
})
            

Sets sibling elements to the same height.