Jquery Match Height

a responsive equal heights plugin
Alternatives To Jquery Match Height
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Selectize.js12,97060010913 days ago7July 12, 201850apache-2.0SCSS
Selectize is the hybrid of a textbox and <select> box. It's jQuery based, and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.
Bootstrap Fileinput5,3011,1823524 days ago89August 17, 202218otherJavaScript
An enhanced HTML 5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more features.
Jstree5,08039813613 days ago31February 19, 20232mitJavaScript
jquery tree plugin
Jquery Mask Plugin4,6512506510 months ago30July 31, 2019118otherJavaScript
A jQuery Plugin to make masks on form fields and HTML elements.
3 years ago1February 03, 2015106JavaScript
A very lightweight jQuery plugin to lazy load images
Malihu Custom Scrollbar Plugin4,110299562 years ago11July 10, 2016412otherJavaScript
Highly customizable custom scrollbar jQuery plugin, featuring vertical/horizontal scrollbars, scrolling momentum, mouse-wheel, keyboard and touch support etc.
Jquery Placeholder4,073120113 years ago4January 12, 201629mitJavaScript
A jQuery plugin that enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet
Animsition3,7492134 years ago8April 26, 201676mitCSS
A simple and easy jQuery plugin for CSS animated page transitions.
Bootstrap Multiselect3,62082246 months ago4August 01, 2021302otherHTML
JQuery multiselect plugin based on Twitter Bootstrap.
Jquery Match Height3,086491285 years ago4February 19, 201778mitJavaScript
a responsive equal heights plugin
Alternatives To Jquery Match Height
Select To Compare

Alternative Project Comparisons


matchHeight makes the height of all selected elements exactly equal


Demo - Features - Gallery - Install - Usage - Options - Data API
Advanced Usage - Tests - Known limitations - Changelog - License


See the jquery.matchHeight.js demo.

jquery.matchHeight.js screenshot

Modern browsers

In the years since this library was originally developed there have been updates to CSS that can now achieve equal heights in many situations. If you only need to support modern browsers then consider using CSS Flexbox and CSS Grid instead.


  • 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


See how others are using jquery.matchHeight.js


jQuery is required, so include it first. Download jquery.matchHeight.js and include the script in your HTML file:

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

You can also install using the package managers Bower and NPM.

bower install matchheight
npm install jquery-match-height


$(function() {

Where options is an optional parameter.
See below for a description of the available options and defaults.

The above example will set all selected elements with the class item to the height of the tallest.
If the items are on multiple rows, the items of each row will be set to the tallest of that row (see byRow option).

Call this on the DOM ready event (the plugin will automatically update on window load).
See the included test.html for many working examples.

Also see the Data API below for a simple, alternative inline usage.


The default options are:

    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

Data API

Use the data attribute 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">My text</div>
<div data-mh="my-group">Some other text</div>
<div data-mh="my-other-group">Even more text</div>
<div data-mh="my-other-group">The last bit of text</div>

All elements with the same group name will be set to the same height when the page is loaded, regardless of their position in the DOM, without any extra code required.

Note that byRow will be enabled when using the data API, if you don't want this (or require other options) then use the alternative method above.

Advanced Usage

There are some additional functions and properties you should know about:

Manually trigger an update


If you need to manually trigger an update of all currently set groups, for example if you've modified some content.

Row detection

You can toggle row detection by setting the byRow option, which defaults to true.
It's also possible to use the row detection function at any time:


Which will return an array of element selections for each row, see this thread for more information and an example.

Remove bindings

$('.item').matchHeight({ remove: true });

This will remove all bindings for the selected elements, from all groups.

Custom target element

$(function() {
        target: $('.sidebar')

Will set all selected elements to the height of the first item with class sidebar.

Custom property

$('.item').matchHeight({ property: 'min-height' });

This will set the min-height property instead of the height property.

Callback events

Since matchHeight automatically handles updating the layout after certain window events, you can supply functions as global callbacks if you need to be notified:

$.fn.matchHeight._beforeUpdate = function(event, groups) {
    // do something before any updates are applied

$.fn.matchHeight._afterUpdate = function(event, groups) {
    // do something after all updates are applied

Where event a jQuery event object (e.g. load, resize, orientationchange) and groups is a reference to $.fn.matchHeight._groups (see below).

Manually apply match height

$.fn.matchHeight._apply(elements, options)

Use the apply function directly if you wish to avoid the automatic update functionality.

Throttling resize updates

$.fn.matchHeight._throttle = 80;

By default, the _update method is throttled to execute at a maximum rate of once every 80ms. Decreasing the above _throttle property will update your layout quicker, appearing smoother during resize, at the expense of performance. If you experience lagging or freezing during resize, you should increase the _throttle property.

Maintain scroll position

$.fn.matchHeight._maintainScroll = true;

Under certain conditions where the size of the page is dynamically changing, such as during resize or when adding new elements, browser bugs cause the page scroll position to change unexpectedly.

If you are observing this behaviour, use the above line to automatically attempt to force scroll position to be maintained (approximately). This is a global setting and by default it is false.

Accessing current group bindings


The array that contains all element groups that have had matchHeight applied. Used internally for automatically updating on resize events, but you may modify this array if you need to manually access any groups (e.g. if you're deleting elements).


Open test/page/test.html in your browser to run unit tests via the jasmine test runner.

If you wish to contribute functionality to this project, you are encouraged to add new tests following the same conventions.

Run gulp test to run unit tests on multiple browsers and multiple resolutions, automatically through selenium.

Run gulp test:cloud to test on even more browsers via a cloud service (you will need to create a file called test/conf/private.conf.js with your cloud credentials that looks like this:

exports.config = {
    user: 'username',
    key: 'key'

Cloud browser testing for this project is provided by BrowserStack (which is free for open source).

Known limitations

CSS transitions and animations are not supported

You should ensure that there are no transitions or other animations that will delay the height changes of the elements you are matching, including any transition: all rules. Otherwise the plugin will produce unexpected results, as animations can't be accounted for.

Delayed webfonts may cause incorrect height

Some browsers do not wait for webfonts to load before firing the window load event, so if the font loads too slowly the plugin may produce unexpected results.

If this is a problem, you should call _update once your font has loaded by using something like the webfontloader script.

Content changes require a manual update

If you change the content inside an element that has had matchHeight applied, then you must manually call $.fn.matchHeight._update() afterwards. This will update of all currently set equal heights groups.

Also note that previous matchHeight bindings do not apply to new elements, even if they match the selector used. In this case you must remove the old bindings and add new ones, see this comment.


To see what's new or changed in the latest version, see the changelog


jquery.matchHeight.js is licensed under The MIT License (MIT)
Copyright (c) 2014 Liam Brummitt

This license is also supplied with the release and source code.
As stated in the license, absolutely no warranty is provided.

Popular Plugin Projects
Popular Jquery Projects
Popular Libraries Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.