[RESOLVED] yet another 100% height issue

**blue-eye-labs** · 11-14-2009 08:59 AM

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

**mitya** · 11-14-2009 05:21 PM

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

Code:

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

**blue-eye-labs** · 11-14-2009 05:28 PM

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** · 11-16-2009 03:59 PM

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** · 11-16-2009 04:13 PM

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>

and the CSS for reference:

Code:

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.

**charlitos** · 11-17-2009 01:06 PM

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** · 11-17-2009 01:30 PM

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

Thread: [RESOLVED] yet another 100% height issue

Thread Tools

Display

[RESOLVED] yet another 100% height issue

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions