jQuery Plugin To Equalizes The height Of Column Elements - oneheight

oneheight is an extremely lightweight jQuery plugin that applies the height of tallest column elements to the others in a same row. The plugin allows to set the maximum height or auto height to the outer element when the screen size is larger or less than 768px.

How to use it:

1. Add the CSS class 'item' to your column elements and then wrap them into a DIV container like this:

<div class="container">
  <div class="item">Content</div>
  <div class="item">With</div>
  <div class="item">Different</div>
  <div class="item">Heights</div>
</div>

2. Put jQuery library together with the jQuery oneheight plugin's script at the end of the webpage.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="oneheight.js"></script>

3. Just call the function on the top container and we're done.

$('.container').oneHeight();

4. Decide whether to set the height to 'auto' when the screen size is less than 768px.

$('.container').oneHeight({
  minAuto: true,
});

5. Set the maximum height.

$('.container').oneHeight({
  maxHeight: 0
});

---

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