If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

[RESOLVED] yet another 100% height issue

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:

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

Probably not the workaround you're looking for but you could set the div height dynamically by reading the viewport dimensions in JS.

I appreciate the response but for me doing this in Javascript is dirty. I'd rather have a purely CSS approach if possible. I'll have to worry about JS enough once I finish realising the design mockup in XHTML and CSS.

If there's something I'm doing wrong in the CSS or some way around this problem I'd appreciate knowing (anyone?)

Im confused, I just tested that css and the image covers 100% of the browser window. Also can you please be more specific if whatever youre mentioning actually happens in all top 5 browsers?

I just tried again in Safari, Chrome, Opera and Firefox and all have the same about of white space if you scroll down no matter of the window size. There's always the same amount of white space at the bottom. Screen shots are attached. Maybe the page structure would help?

Here it is:

HTML Code:

<body><div id="top-menu"><div id="menu-name-plate"></div><div id="menu-items"><a id='menu-envision' href='/envision/' class='main-menu-item' ></a><a id='menu-develop' href='/develop/' class='main-menu-item' ></a><a id='menu-inform' href='/inform/' class='main-menu-item' ></a><a id='menu-contact' href='/contact/' class='main-menu-item' ></a></div></div><div id="site-body"><div id="hidden-drawer"></div><div id="side-label"><img src='/site/library/images/envision-sidelabel.png' alt='Envision' /></div><div id="main-content"><p ><em>Unable to locate page.</em> A fatal error has occurred. I'm sorry for any inconvenience this may have caused you but it has been reported and logged. If you wish, you can contact the administration at <a href='mailto:me@gideonfarrell.co.uk' >me@gideonfarrell.co.uk</a></p></div></div></body>

Apparently there's a small gap on top of your side-lable div margin and this small gap plus the negative margin is being added to the bottom of the page since they're both taking up space from the parent container height in which youre trying to expand the height of your sidebar to 100%. Im also assuming that your hidden-drawer div is somehow triggering this effect since its sharing place on the same container youre trying to occupy the full height.