Dev Depot: MatchHeight, Make the Height of all Selected Elements Equal

It seems like a simple enough task, but it is one that has long frustrated web designers: creating a matrix of same sized elements, each (perhaps) containing a different amount of content, so that this array appears “even” and symmetrical.

With a goal of making a more robust equal heights plugin for jQuery that would easily make the height of all selected elements exactly even, developer Liam Brummitt set out to create matchHeight (www.brm.io/jquery-match-height/)

The matchHeight plugin’s features include being row aware, in order to handle floating elements, plus full responsiveness, so that it automatically updates on window resizing.

“I needed a more robust version of the common equal heights plugin (that everyone and their grandma has made before),” Brummitt explains. “So matchHeight improves on these by adding features and handling the edge cases where the others tend to fail in practice.”

The matchHeight plugin’s features include being row aware, in order to handle floating elements, plus full responsiveness, so that it automatically updates on window resizing. Additionally, matchHeight handles mixed padding, margin and border values (even if every element has different values).

Box-sizing and the handling of images and other media, which are updated automatically after the element loads, along with an API for handling data attributes, rounds out the plugin’s initial feature set.

Although the current version is an early v0.5.0., matchHeight has been fully tested in IE8+, Chrome, Firefox and Android it and it works well, but as with all new technologies, should be tested in your own developmental environment.

“Why not use CSS?” Brummitt asks rhetorically, explaining that “Making robust, responsive equal height columns for arbitrary content is difficult or impossible to do with CSS alone (at least without hacks or trickery, in a backwards compatible way).”

JavaScript based solutions are not without their problems however, so developers are advised to ensure that their layout remains usable even if JavaScript is disabled on the viewer’s browser.

Setting up matchHeight is simple, and first requires placing a standard jQuery call, along with the matchHeight script, either jquery.matchHeight.js or jquery.matchHeight-min.js, which are included in the page’s HTML file, like so:

<script src=”jquery.matchHeight.js”></script>.

Using matchHeight then requires a call in the DOM ready event: $(elements).matchHeight(byRow); — where the byRow option is a boolean switch that enables or disables automatic row detection, with the default setting being “true.”

A working example of the script is provided to help explain its functionality and implementation.

In its practical application, matchHeight allows users to employ the data attribute datamatchheight=”group-name” (or data-mh shorthand), where the group-name is an arbitrary string that denotes those elements that should be considered as a group.

The publisher notes that all elements that use 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 and with byRow optionally enabled when using the data API.

The matchHeight script offers several advanced options, internal properties and functions, such as $.fn.matchHeight._groups which calls an array containing all element groups that have had matchHeight applied.

The matchHeight plugin is available under The MIT License, with the source code over at GitHub.

Related:  

Copyright © 2025 Adnet Media. All Rights Reserved. XBIZ is a trademark of Adnet Media.
Reproduction in whole or in part in any form or medium without express written permission is prohibited.

More Articles

profile

WIA Profile: Paulita Pappel

Raised in Spain, surrounded by a predominantly Catholic community, Paulita Pappel grew up being told porn was bad. When she became a feminist, she was told her fascination with porn was not in line with her desire to empower women. This inner conflict made her feel like there was something wrong with her.

Women In Adult ·
opinion

Complying With New Age Assurance and Content Moderation Standards

For adult companies operating in today’s increasingly regulated digital landscape, maintaining compliance with card brand requirements is essential — not only to safeguard your operations but also to ensure a safe and transparent environment for users.

Gavin Worrall ·
opinion

Understanding the FTC's New 'Click to Cancel' Rule

The Federal Trade Commission’s new “Click to Cancel” rule has been a hot topic in consumer protection and business regulation. Part of a broader effort to streamline cancellation processes for subscription services, the rule has sparked significant debate and legal challenges.

Corey D. Silverstein ·
opinion

Key Factors for Choosing a Merchant Services Partner

Running a successful adult business requires more than just delivering alluring and cutting-edge products and services. Securing the right payment processing partner is essential to maintaining a steady revenue stream.

Jonathan Corona ·
opinion

Identifying and Preventing Transaction Laundering

Recently, a few merchants approached me after receiving compliance notifications from their acquirer about transaction laundering. They were unsure what it meant, and unsure how to identify and fix the problem.

Cathy Beardsley ·
profile

WIA: Alexis Fawx Levels Up as Multifaceted Entrepreneur

As more performers look to diversify, expanding their range of revenue streams and promotional vehicles, some are spreading their entrepreneurial wings to create new businesses — including Alexis Fawx.

Women In Adult ·
opinion

Navigating Age-Related Regulations in Europe

Age verification measures are rapidly gaining momentum across Europe, with regulators stepping up efforts to protect children online. Recently, the U.K.’s communications regulator, Ofcom, updated its timeline for implementing the Online Safety Act, while France’s ARCOM has released technical guidance detailing age verification standards.

Gavin Worrall ·
opinion

Why Cyber Insurance Is Crucial for Adult Businesses

From streaming services and interactive platforms to ecommerce and virtual reality experiences, the adult industry has long stood at the forefront of online innovation. However, the same technology-forward approach that has enabled adult businesses to deliver unique and personalized content to consumers worldwide also exposes them to myriad risks.

Corey D. Silverstein ·
opinion

Best Practices for Payment Gateway Security

Securing digital payment transactions is critical for all businesses, but especially those in high-risk industries. Payment gateways are a core component of the digital payment ecosystem, and therefore must follow best practices to keep customer data safe.

Jonathan Corona ·
opinion

Ready for New Visa Acquirer Changes?

Next spring, Visa will roll out the U.S. version of its new Visa Acquirer Monitoring Program (VAMP), which goes into effect April 1, 2025. This follows Visa Europe, which rolled out VAMP back in June. VAMP charts a new path for acquirers to manage fraud and chargeback ratios.

Cathy Beardsley ·
Show More