Introducing Right Height
Right Height is a lightweight script that dynamically sets content areas of varying lengths to the same height.
The Height Problem
Creating equal height columns used to be pretty easy. When we used tables to create layouts, heights took care of themselves. When we moved to using divs and CSS for desktop-based designs, we simply set a height value and called it a day.
Responsive Web Design complicates things a bit.
As fluid-width containers scale and adapt to different screen-sizes, the length of the content within them becomes unpredictable. On narrow viewports, it adds a lot of vertical height. On wider viewports, content containers can be shorter. Setting a fixed height attribute becomes impossible.
Enter Right Height.
How it works
You identify the content areas that you want to be the same height with a few simple data attributes. Right Height measures the height of each element, and then sets the height of all of them to match the tallest one.
Every time a user resizes their screen, Right Height runs again. And when elements are stacked vertically on smaller screens, it let’s them scale to their natural height to avoid any unneeded whitespace.