Image from 96dpi on Flickr, used under Creative Commons license.

Super Simple jQuery Height Manipulation

This is a really easy way to use jQuery to equalize a two column web page layout or otherwise manipulate element heights . As well as providing for visual symmetry, this method of jQuery height manipulation provides wider layout flexibility. The main content and sidebar of Shiny Toy Robots aren’t visually equal, but I still use this code to make sure I avoid a couple of potential layout glitches, and also to give me the capability to extend my design options.

Equalizing element heights

When I say this is super simple, I mean it. Make sure, obviously, that you’re loading jQuery library in your <head> section. Our basic HTML is for a main content section and a sidebar.

<section id="content">
  some content here
</section><!-- #content -->

<aside id="sidebar">
  sidebar content here
</aside><!-- #sidebar -->

We want to make sure that these two elements are equal in height (and yes, I know there’s an argument about the semantic correctness of using <aside> for the sidebar). We can achieve that with this jQuery code.

As a quick note, I tend to use jQuery.noConflict and set the jQuery call to ‘$j’ instead of the default ‘$’.

var contentHeight = $j('#content').height();
var sidebarHeight = $j('#sidebar').height();

if(contentHeight < sidebarHeight)
{
  $j('#content').css('height', sidebarHeight + 'px');
} else
{
  $j('#sidebar').css('height', contentHeight + 'px');
}

Setting the variable ‘contentHeight’ gets the height of the #content section, and the variable ‘sidebarHeight’ gets the height of the #sidebar aside. If the height of the #content is less than the #sidebar, then jQuery sets the height of #content to that of #sidebar. If not, then the jQuery sets #sidebar to the same height as #content. This ensures that the columns are equal.

Some additional flexibility

There are other very easy ways to equalize columns with jQuery. I tend to use this method because it gives me more flexibility. Setting ‘contentHeight’ and ‘sidebarHeight’ as variables allows me to reuse them if necessary. It also means that I can change the heights of the elements relative to one another beyond simply equalizing them.

I might, for example, want to always have the #content element be a minimum of 200 pixels taller than the #sidebar.

if (contentHeight < sidebarHeight + 200)
{
$j('#content').css('height', sidebarHeight + 200 + 'px');
} // we can leave out the 'else' statement completely

For Shiny Toy Robots I have an absolutely positioned #sidebar element. I don’t want the #sidebar to be equal in height to the #content, but I do need to make sure that the #content is at least as tall as the #sidebar; both for visual consistency and to ensure that #sidebar never falls off the bottom of the browser window.

$j('#content').css('min-height', sidebarHeight + 'px');

It’s easy to extend the scope

There are other (even simpler) ways to merely equalize heights. I like the flexibility of this method. Not just because my needs extend to a little more than equalizing columns now, but because I like to have code that’s set up to allow me to easily expand the scope of my functionality in future. I can reuse the variables I’ve already set, and have more options in how I want to use them.

If you enjoyed this post, why not subscribe to receive all the latest stories from Shiny Toy Robots?

Tagged as: , ,