Web Design

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!

Published by nbarger

24 thoughts on “jQuery Makes 100% Height So Much Easier”

  4. Pingback: Javascript / JQuery – detect browser height – simple fix

  5. Nice work around if you are sure of js being available of course. I found I needed an if statement to check the content is not actually larger than the viewport though else the content area was cut off:

    //Initial load of page
$(document).ready(sizeContent);

//Every resize of window
$(window).resize(sizeContent);

function sizeContent() 
{
	var contentHeight = $("#content").height();
	var newHeight = $("html").height() - $("#header").height() - $("#footer").height() * 2; // + "px";
    if (contentHeight < newHeight)
	{
		$("#content").css("height", newHeight + "px");
	}
}
    Reply

  6. Oops, that had a couple of site specifics in it, delete at will, this is more appropriate for the posts example:

    //Initial load of page
$(document).ready(sizeContent);

//Every resize of window
$(window).resize(sizeContent);

function sizeContent() 
{
	var contentHeight = $("#content").height();
	var newHeight = $("html").height() - $("#header").height() - $("#footer").height();
    if (contentHeight < newHeight)
	{
		$("#content").css("height", newHeight + "px");
	}
}
    Reply

  7. It works perfect for height but my website is not centered anymore , and anything i can think of is not working … anyone?

    Reply

  14. Header

    content

    Footer

    ———————————css——————————————————
    html, body {
    height : 100%;
    }
    #map-page {
    height : 100%;
    }
    #map-page .ui-header {
    height : 40px;
    }
    #map-page .ui-content {
    position : absolute;
    top : 40px;
    right : 0;

    Reply
  15. Pingback: 3 column fluid layout with header, sticky footer and 100% height columns | Ben Pearson

    1. Nicholas,

      Actually your code doesnt work if we minimize and maximize our browser, the page height will be taller and taller.
      How does the mechanism of your js?
      thx

      Reply

      1. What browser are you using? This is a pretty old post, so not sure if it’s up to date, but I am happy to take a look.

        Thanks.

      2. i’ve tried every browser such as chrome, IE 9
        Sory, not minimize, but when i restore down the browser.
        It is like the js is re-calculate the height of the browser when it is restore down or maximize.

        Thx for your reply Nico.

  17. Thanks, I spent more than two days trying to find CSS solution for my sticky-footer layout and found this little piece of jQuery code here to save me from further frustrations… The only modification is that I use it to set min-height (not height) of my content div and it works in all browsers, while CSS-only solutions suffer from browser compatibility issues.

    Reply

  19. found an error in your script, if you do the $(html) as the height and then if the user resizes the window before they scroll it will make the script run over and over and turn it into a infanat scroll.

    but if you change the $(html) to —> $(window) it fixes this issue and will not have that issue.

    great script saved me a ton of time

    Reply

    1. Thanks Tyler! 🙂
      That solved my problem with an absolutely centered div wich wasn’t centered anymore, when changing the height of the browserwindow.

      cheers!

      Reply

Leave a reply to Stefan P. Cancel reply