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
equal-height-div



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="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></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() {
 $('.item').matchHeight({
    byRow: true,
    property: 'height',
    target: null,
    remove: false
  });
});

Where:
* 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.

DEMO

DOWNLOAD

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


2 Replies to “How to make equal column / div heights using jquery”

  1. Hi Rohit

    Am your follower thank u for helping in coding , I need your help for my new project, how to make Php and Mysql coding programming , that based on zipcode (pincode) submit mail has to send to correspondence zip code city recipient, upon submit ,Hope i will get positive feedback from you.

    Thanks and regards
    Tirumal k
    Mail Id: [email protected]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.