How to make equal column / div heights using jquery

You may have face this issue while designing of your website, like if you have two div side by side and want to adjust the height of div to be same. then there is a great plugin for you which can solve your problem quickly with little configuration. Which name is jquery.matchHeight.js It provides quick solution to make equal height elements

Here is the features of jquery.matchHeight.js

* match the heights for groups of elements automatically
* use the maximum height or define a specific target element
* anywhere on the page and anywhere in the DOM
* responsive (updates on window resize)
* row aware (handles floating elements and wrapping)
* accounts for box-sizing and mixed padding, margin, border values
* handles images and other media (updates after loading)
* supports hidden or none-visible elements (e.g. those inside tab controls)
* throttled to balance performance and smoothness
* easily removed when needed
* maintain scroll position
* data attributes API
* callback events
* unit tests
* module loader support
* tested in IE8+, Chrome, Firefox, Safari, Android, iOS

Let’s start integration.
First download full library from here and include jquery.matchHeight.js on page.

<script src=""></script>
<script src="jquery.matchHeight.js" type="text/javascript"></script>

Here i am going to create some div element and add data-mh=”group-name”
where group-name is an arbitrary string to identify which elements should be considered as a group.

<div data-mh="my-group" class="item">My text</div>
<div data-mh="my-group" class="item">Some other text</div>
<div data-mh="my-other-group" class="item">Even more text</div>
<div data-mh="my-other-group" class="item">The last bit of text</div>

Call matchHeight() function on page to make it equal height element.

$(function() {
    byRow: true,
    property: 'height',
    target: null,
    remove: false

* byRow is true or false to enable row detection
* property is the CSS property name to set (e.g. ‘height’ or ‘min-height’)
* target is an optional element to use instead of the element with maximum height
* remove is true or false to remove previous bindings instead of applying new ones

See demo and download full source code.



For more customization see advanced option on official document jquery.matchHeight.js on github