Equal Height Columns Using jQuery Sameheight Responsive Plugin

Equal Height Columns Using jQuery Sameheight Responsive Plugin
File Size: 4.73 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.