HTML and Body are not taking up the entire browser - HTML5 problem?

Question

I have no idea what I'm doing wrong, but for some reason, I'm experiencing a bug with my markup that is causing my body element and my html element to not take up the entire viewport in the browser.

I can't get to the bottom of this. It first reared its head when I tried to add a 10px purple border to the top and bottom of my body.

If you inspect the page in Firebug, you you can see that there's a huge chunk of the page that is not highlighted when you hover on the html element or the body element. And the border that I applied at the bottom is hanging up very far on the page.

Does anyone know why this is? Could it have to do with my using HTML5?

Here's the page in question: http://electricorangecreative.com/test/index.html

And here are my style sheets: http://electricorangecreative.com/test/reset.css http://electricorangecreative.com/test/style.css

Answer 1

Use a sticky footer technique.

Answer 2

I've had a look at the current test page and it looks like the only outstanding issue is the vertical scrollbar still appearing without need to. Easiest fix for this is to simply remove any margin or padding you have on elements you've set to height:100%. The culprit I identified is div#wrapper. Take off the padding there and the issue is resolved (in FF at least - not tested on other browsers). Since the padding is added to the height you end up with an element that stretches over 100% vertically. Use margins on children instead of padding - should be fine!