Hi all,

Having searched a bit on this problem but not been able to come up with a solution I decided to post here (yes I've validated my HTML and CSS already).

I have a <div> (#site-body) whose height needs to be 100% of the document's height because it holds the main background image (there's a reason this isn't held by the <body>). When I set the following:

Code:
html {
	height:100%;
}

body {
	height:100%;
}

#site-body {
	background:url(/site/library/images/background-wood-black-vertical.png) repeat 0 0;
	height: 100%;
}
The document always has about 100px below the browser window (even though there is no content below about 500px). This space is completely white because nothing occupies it.
I checked the dimensions of <html> and <body> in Firebug and both give height as 600px (which is correct since that's the size of the window) but the window scrolls to about 700px of blank space.

This is really quite frustrating so if anyone knows what I'm doing wrong I'd appreciate the insight