I needed a quick and easy solution that would use jQuery (already in use on the site) and expand the main content wrapper to fill the viewport, but only on pages where it wasn’t tall enough already.  A quick Google search returned a bunch of solutions from 2005-2007, or that included poorly formed code (and lots of it).  So, I just wrote my own instead.

It’s pretty simple and easy, and I’ve commented the only lines you should need to worry about configuring.  In my case, I wanted to expand the #sidebar element in order to push the footer down.  You can set the target variable to whichever element you want to expand by using the standard jQuery selector syntax.  The wrapper variable should be the element that contains all of your content, i.e. the element that should be compared to the viewport to see if it needs to be expanded or not.  Finally, the adjustment variable allows you to customize the height of the adjustment.  In my case, I needed to knock off 10px due to padding applied to elements being manipulated.  I thought about using jQuery’s .outerHeight() function, but this just seemed a lot easier.  This variable can be a positive or negative number, based on your needs.

As always, your mileage may vary.  It worked fine for me in the situation I tested it in.  Let me know if you have any questions about implementing this code, or leave a comment below to link to where you’re using this code so we can all see it in action.

Here’s the code:

jQuery.noConflict();
jQuery(document).ready(function($) {

    var target = $('#sidebar'); //What element should the additional height be added to?
    var wrapper = $('#wrapper'); //What element should be compared to the viewport height?
    var adjustment = 0; //Do you need to adjust the height due to padding, etc.?

//You shouldn't need to configure anything else down here.
    var viewportHeight = $(window).height();
    var wrapperHeight = wrapper.height();

    if(viewportHeight > wrapperHeight) {
        var addHeight =     (viewportHeight-wrapperHeight);
        var targetHeight = target.height();
        var newHeight = addHeight + targetHeight;
        
        target.height(newHeight+adjustment);
    }

});