Question

In my site I have not set a height for a html or a body tag. This works great on pages with lots of content, but when the content on a page is not enough to fill the page up, I want the body height to be 100%.

So I thought a bit of jQuery might help me out. I’ve come up with this little snippet which I thought would be adequate but unfortunately it doesn’t do all too much.

if(jQuery("html").css("height") < "100%"){
    jQuery("html, body").css({"height": "100%", "min-height":"100%"});
}

I’m guessing that this may be because the jQuery may not picking up the body height as a percentage, maybe just in pixels.

Would really appreciate your help.

Answer 1

You can do this with 100% height layout. Without any javascript.

Check this:

http://peterned.home.xs4all.nl/examples/csslayout1.html (have used in my projects)

http://www.dave-woods.co.uk/index.php/100-height-layout-using-css/

Anyway, if you want to do this via jQuery:

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

You can define if document height less then window then set documents height to body or your main <div id=container></div> if you have such.