100% height not working despite doing the obvious

**brad_langdon** · 04-09-2008, 12:21 AM

Hi, I am hoping someone out there can help me to get my container div to stretch vertically over the whole page.
Even though I have content inside it it wont even stretch to the bottom of that.

I have set the html and body and the div itself to 100%.

The address is www.vander.co.nz/Index2.html

The css is www.vander.co.nz/Main.css

Please help I am at my wits end with this and cannot figure out any other way.

**rangana** · 04-09-2008, 04:39 AM

Hi brad_langdon,

and a warm Welcome to the forum

You had validation errors:
http://jigsaw.w3.org/css-validator/v...ning=1&lang=en

http://validator.w3.org/check?uri=ht...Inline&group=0

Your problem is a common nested div problem.

A temporary fix would be changing your div having a box id's height from 100% to higher

Code:

<div style="height: 1010px;" id="box" align="center">

Hope that helps

**brad_langdon** · 04-10-2008, 03:11 AM

Thanks for that.

But isn't that the same as defining the height for each page.

Was hoping to have it automatic so that it would adjust the height according to how much content was on each page.

Or was your solution just to keep it sorted until I got the page properly validated?

**rangana** · 04-10-2008, 04:11 AM

HOnestly, I can't figure it (for now), where's the mess...

...I suggest that you validte your page...there are times that the error are fixed together with the validation

**sreenivasulareddy** · 04-10-2008, 11:56 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

this code is not take the 100% Height

**sreenivasulareddy** · 04-10-2008, 12:00 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

**brad_langdon** · 04-10-2008, 11:00 PM

Thanks alot for your help guys.

I tried changing that code at the top of my index page but I am still having the same problem.

As it has now been changed to html instead of xhtml I am getting a bunch of tag errors when I validate it but apart from those errors the problem is 1 error relating to a div tag.

**brad_langdon** · 04-11-2008, 12:37 AM

I have changed it back to xhtml and I have also managed to get rid of ALL of the validation errors.

Still have the 100% height problem though.

Thanks for helping me this far but it would be great if someone could help me sort out this final height problem

**rangana** · 04-11-2008, 01:58 AM

Hey, I must say you have done an extensive and impressive job..yet you still have one controllable error.

I wonder why your CSS validates...yet there is no align property

Code:

#box
{	padding:0px;
	align:center;
	margin:0 auto;
	background:url(Images/BGlight.jpg) top center repeat;
	border-left:1px solid #999999;
	border-right:1px solid #999999;
	width:690px;
	min-height:100%;
	height:100%;
}

...Anyway, I would suggest some fix, try changing your contentcon div to:

Code:

#contentcon
{	
	width:100%;
	height:auto;
	background:url(Images/BGlight.jpg) top center repeat;
}

See if it helps

**brad_langdon** · 04-11-2008, 02:56 AM

I tried that with no success unfortunately.

Its weird because technically all of the content should be inside #box but it is stopping around halfway down...doesn't make alot of sense to me.

Even when I change the height of #box to something really small like 200px it stays exactly the same which makes me think it isn't communicating with the style sheet properly or something but some properties will change when asked its just the height that wont...