Take the 2-minute tour ×

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.

share|improve this question
why not just set height to 100% for every page? –  lostyzd Oct 6 '11 at 19:07
Replace jQuery with a $ you look to have picked the snippet out of a plugin –  KryptoniteDove Oct 6 '11 at 19:10
@KryptoniteDove why? $ is just an alias for jQuery –  Andy Oct 6 '11 at 19:14
@KryptoniteDove: that has nothing to do with anything and is actually perfectly okay. In some scenarios you actually have to use jQuery instead of $, such as when in no conflict mode. –  Chris Pratt Oct 6 '11 at 19:17
Had to use jQuery instead of $ in no conflict mode for Drupal. And setting the height to 100% for every page does not work because when the content is longer than 100% it goes over the footer it it's absolutely positioned to the bottom. –  joe Oct 18 '11 at 0:19

2 Answers 2

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)


Anyway, if you want to do this via jQuery:


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.

share|improve this answer
The CSS way worked a treat, Cheers Samich. –  joe Oct 6 '11 at 19:48

Apply below css to your body/html

html, body { min-height:100%; height:auto }

share|improve this answer

Your Answer


