Matching Heights

Scroll Down

Written by Chris Wright

August 8, 2017

Matching Heights

In web development, there are standards and then there are some things that you can do just to make your site look a little nicer. Matching row heights is one thing that will make your site look less sloppy and more professional. Surprisingly it’s not that hard to do!

So you want to match the height between two different objects? There are several ways that you can accomplish this. You could do it all in JavaScript or in jQuery yourself (which is a little bit more complicated, not too hard though) or there are a few different libraries you could use. Those being matchHeight.js, Zurb Foundation’s equalizer and Flexbox.

MatchHeight.js is a jQuery library you can include on your project. Once you have added the file and called the file to be run on your page, all you need to do is call the function on the items you want to match the height. For instance, if you want four objects in a row with the same class to be the same height, you would call the function like this:

$(‘.column-class’).matchHeight();

You can also match the heights between multiple objects by calling them in a comma-separated list, which is really handy. You could do something like:

$(‘.profile-picture, .bio’).matchHeight();

Zurb Foundation is a css/scss framework similar to the Bootstrap framework. They have built-in functionality that essentially does this called Equalizer. One way to use this, you will need the ability to add a data-attribute to your markup. The container around the elements you want to match heights will need the attribute “data-equalizer” and each child element you want to match heights will get the attribute “data-equalizer-watch”. The child elements will all be resized to the same height. You can also specify which media query to match heights on based on Foundation’s built-in grid system. You will just add the attribute ‘data-equalize-on=”medium’” or small, large, etc. This will make sure the equalizer is only run on that screen size.

You can also trigger the Equalizer in javaScript. You would simply call:

Var elem = new Foundation.Equalizer(element, options);

Where “element” would be the object to add the trigger to and “options” overrides to the default plugin settings. More information on the different plugins and methods that can be used alongside equalizer, can be accessed here.

Flexbox is a css layout mode that is very versatile and can help with a lot of things. Thankfully browser support is finally catching up and it can be used on most projects. By default, flexbox will match the heights of the child elements of the container that flex is declared on. To initiate flexbox, you would call display:flex; on your wrapper and each of the 1st child elements will have matched heights. It’s as easy as that!

In review, if you need to match the height of several elements, whether it be a grid or several objects that look messy being different heights, you could use javascript and build out all the logic yourself or you could use a library or framework that has already built the logic out for you. Whatever method you choose, your work will look cleaner and more professional in the end!