Essentially can anyone explain this:

> 
> Because body isn't positioned (or more accurately, it's
>  position:static by default), setting a child element to height:100%
>  causes it to be 100% of the height of the html element, not the body
>  element. Thus, if you want something to be as tall as the body is
>  (going down past the bottom of the page) use `body { position:relative }`
> 
> 
> 

This statement is taken from: <http://phrogz.net/css/htmlvsbody.html> It's is located at the bottom of the page.