Equal Height Columns Using jQuery Sameheight Responsive Plugin

Sameheight is an ultra-light (~1kb) and responsive-optimized jQuery plugin that automatically adjusts the height of the columns according to the tallest one to make them have the same height.

See also:

• jQuery Plugin For Equalizing The Height of Your Elements - Equal Height Columns
• jQuery Plugin for Equalizing The Height or Width of Your Elements - equalize.js
• Minimalist jQuery Responsive Equal Height Grid Layout - Javascript Grids
• jQuery Plugin For Responsive Equal Height Containers
• Responsive jQuery Equal Height Photo Gallery Plugin - Pycs Layout

How to use it:

1. Include the jQuery library and the jQuery sameheight plugin at the bottom of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="jquery.sameheight.min.js"></script> 

2. Create a set of Html elements (e.g. DIVs) with a same CSS class.

<div class="column">
    
  Your content goes here

</div>

<div class="column">
    
  Your content goes here

</div>

<div class="column">
    
  Your content goes here

</div>

...

3. Just call the function on the jQuery selector '.column' and the sameheight plugin will do the rest.

$(document).ready(function(){
$('.column').sameheight();
});

---

This awesome jQuery plugin is developed by DiederikLascaris. For more Advanced Usages, please check the demo page or visit the official website.