jQuery Makes 100% Height So Much Easier

jQuery gets an insane amount of hype these days and for the most part it is warranted. The interesting thing to me is that I never see amazingly new things with jQuery that you couldn’t do with plain old javascript before; however, jQuery just makes it so much easier.

One simple example is the infamous “CSS 100% height” issue. If you’ve done any CSS work, at some point you’ve come across the desire to have a 100% height div or table and have shuffled through all of the hacks and tweaks on how to do this. Often times, the examples use javascript to not only set the height, but also maintain the proper height when resizing the window.

I remember writing client-side code to set the height based on the DOM object height or clientheight and then finding out that it only worked in a particular browser. To maintain the same results across multiple browsers meant an extensive amount of hacky code checking browser type and version.

jQuery to the Rescue

Enter jQuery, where with a single attribute of height() you can abstract all of the difficulty of finding the appropriate height of an object regardless of browser or operating system.

Below, I’ve setup an example of using jQuery to autoset the height of a content div in the middle of the screen. The code also automatically adjusts on resizing the browser window.

Setting Up the HTML

Below is a very basic HTML layout. It consists of a header, a content section, and a footer.

<div id="header">&nbsp;</div>
    
<div id="content">&nbsp;</div>
    
<div id="footer">&nbsp;</div>

Add a Bit of CSS

Below, I’ve set the HTML and Body tags to 100% and 0px padding/margin. This allows the javascript method to key off the total height of the HTML element. I’ve also set some colors and fixed heights for the header and footer just for visibility in the demonstration.

html, body
{
    height: 100%;
    padding: 0px;
    margin: 0px;
}
        
#header
{
    background-color: Blue;
    height: 100px;
}
        
#content
{
    background-color: Red;
}
        
#footer
{
    background-color: Blue;
    height: 50px;
}

A Short jQuery Snippet

First, we need to discuss the sizeContent() method. This method simply gets the total height of the page via $(“html”).height() and then subtracts the header and footer heights. This gives us the necessary height for the content. We then simply set the CSS height attribute for the content div to the newHeight value.

$(document).ready() and $(window).resize() are pretty self explanatory and simply call the sizeContent() method upon page_load and on any event the window is resized.

//Initial load of page
$(document).ready(sizeContent);
//Every resize of window
$(window).resize(sizeContent);
//Dynamically assign height
function sizeContent() {
    var newHeight = $("html").height() - $("#header").height() - $("#footer").height() + "px";
    $("#content").css("height", newHeight);
}

Where to Host My jQuery Web Application?

If you’re looking for a place to host your web application there was recently some interesting news. Web.com made a big move by purchasing Network Solutions for (reports vary) $560 million!

Network Solutions now has VPS hosting (“Virtual Private Server” hosting), for more advanced and technologically-inclined website builders who want more control over their websites, and more capability in the structure they’re using. Head over to Network Solutions to check it out today.

Happy coding!