Equal height columns with jQuery and CSS

With CSS only it's very difficult to achieve the result of equal height columns, but thanks to jQuery this task turns out to be really simple. All we have to do is to take a page element as a reference, get its height through the height() method and using the returned value on the columns we want to make appear of equal height. In this post I'm going to show you a practical application of this routine, using in this case the height of the document object itself. The jQuery code actually consists of two simple statements, as you can see below:

$(document).ready(function() {
    
    
   var docHeight = $(document).height();
   $('#main, #content-sub').css('height', docHeight);
    
    
});

With a single statement and using the css() method we set the height of the columns we want to stylize.

Demo

Live demo