a responsive equal heights library

matchHeight screenshot

matchHeight makes the height of all selected elements exactly equal.

Before CSS Flexbox and CSS Grid this was a tricky problem, but it is now strongly recommended to use those techniques instead of this library where possible.


See the matchHeight demo.


  • 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
  • tested in IE8+, Chrome, Firefox, Chrome Android

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.


Visit matchHeight on GitHub for download, installation and usage documentation.


matchHeight is licensed under The MIT License (MIT)