Body with 100% height only filling the viewport, not the page

[bare_nature]

Hello,

 

I have read several posts about this on this forum and other fora, but I don't see any solutions. The question is dead simple, why is it that when the body is assigned a height of 100% that it only fills the viewport and not 100% of the page?

 

First of all, I don't see any use for this and second, it is illogical.

 

Are there fixes for this? It would make my day if one of you CSS experts would give a straightforward answer to this question.

 

Thanks a lot!

 

Bart

[haku]

Setting an element to a height of 100% means it completely fills the height of it's parent element. You are probably thinking of the body as the top parent in the page, but actually the HTML tag is the top parent in the page. So you need to set both the HTML tag and the body tag to be 100%.

 

html, body
{
  height:100%;
}

 

Try that out.

[bare_nature]

Thanks for your reply, Haku. I really tried everything I could think of before starting this topic. Even when I set html to height: 100%, the body remains to only occupy the viewport and not the full page. I tested this in Safari and Firefox.

[haku]

Are you trying to get a sticky footer? (I.e. a footer that sits at the bottom if there isn't enough content to fill the page)?

[bare_nature]

Well, I have been trying to create a layout for days now, but had to give it up. Normally I am stubborn like hell, but the deadline wins it this time.

 

I wanted to create a layout like that of Smashing Magazine, that is, full width header, full width footer, but the footer needs to stay at the bottom of the page at all times. If the content is not filling the whole page then the footer must remain at the bottom of the page.

 

The problem I ran into was that the body (height: 100%) only took up the viewport (not the entire page) when the main content was larger than the viewport. The consequence was that my footer (given an absolute position at the bottom) also stayed at the bottom of the viewport and not the full page (which resulted in a strange effect).

 

If I would use float: left and clear: both for the footer, then it wouldn't stay at the bottom if the content does not fill the entire page.

 

I hope you get the idea. I started this thread as a last resort, but don't expect to find a definitive answer. I'm just baffled that I couldn't find the solution  .

 

Thanks for your time anyway. It is much appreciated.

 

Bart

[haku]

Here's the definitive answer: http://www.cssstickyfooter.com/

 

[bare_nature]

I'm gonna try this tonight and will thank you on my knees if this works .

 

Thanks for the link Haku!

[haku]

If you implement it right, it works. I use it on pretty much every site.

 

As a future suggestion, this is why it's good to state your overall goal in your thread posts - I could have pointed you at that site in my first post!