[RESOLVED] yet another 100% height issue

This site is best viewed in a modern browser with JavaScript enabled.

[RESOLVED] yet another 100% height issue

blue-eye-labs

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:

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

mitya

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

document.getElementById('site-body').style.height = (self.innerHeight || (document.documentElement.clientHeight || document.body.clientHeight)) + "px";

blue-eye-labs

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?)

charlitos

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?

blue-eye-labs

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:

<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>

and the CSS for reference:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin : 0;
padding : 0;
border : 0;
outline : 0;
font-size : 100%;
vertical-align : baseline;
background : transparent;
}
body {
line-height : 1;
}
ol, ul {
list-style : none;
}
blockquote, q {
quotes : none;
}
blockquote:before, blockquote:after, q:before, q:after {
content : '';
content : none;
}
:focus {
outline : 0;
}
ins {
text-decoration : none;
}
del {
text-decoration : line-through;
}
table {
border-collapse : collapse;
border-spacing : 0;
}
* {
font-size : 10pt;
font-family : Helvetica, Arial, Verdana, sans-serif;
color : #bfb6ac;
}
html {
height : 100%;
}
body {
height : 100%;
}
#site-body {
background : url(/site/library/images/background-wood-black-vertical.png) repeat 0 0;
height : 100%;
}
#top-menu {
background : url(/site/library/images/top-menu-background.png) repeat-x 0 0;
position : absolute;
width : 100%;
height : 200px;
top : 0;
left : 0;
}
#menu-name-plate {
background : url(/site/library/images/top-menu-nameplate.png) no-repeat 0 0;
width : 260px;
height : 100px;
margin-top : 24px;
margin-left : 25px;
}
#hidden-drawer {
height : 150px;
margin-left : 160px;
}
#side-label {
height : 100%;
width : 160px;
float : left;
min-height : 465px;
margin-top : -65px;
}
#main-content {
padding-top : 50px;
}
.darktype {
color : #1a1917;
}
.medtype {
color : #403d38;
}

Thanks for checking this out.

safari.PNG

69kB

chrome.PNG

78kB

opera.PNG

36kB

firefox.PNG

27kB

charlitos

ok way better now, your problem is here:

#side-label {
height : 100%; // REMOVE
width : 160px;
float : left;
min-height : 465px;
margin-top : -65px;
}

Edit: I blamed the wrong element.

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.

blue-eye-labs

Ahh! Thank you!
I didn't think to look at that but now that you've said it it's a bit obvious. Gah!