a responsive equal heights library

matchHeight screenshot

matchHeight makes the height of all selected elements exactly equal.

While this used to be a tricky problem, it's advisable to use CSS Flexbox and CSS Grid where possible these days, though this library may still be useful for legacy browsers.

Demo

See the matchHeight demo.

Features

  • 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.

Download

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

License

matchHeight is licensed under The MIT License (MIT)