CSS height:100% problem

[Tiestarian]

Here's the page with the problem on.. http://www.cse.dmu.ac.uk/~p05292984/...nt1/links.html

I've got the white menu on the left hand site.. and when you scroll down, the menu finishes. I want the menu to continue all the way down the page. I've set the menu div to "height:100%;". I thought that filled 100% of the body but it seems to be just filling 100% of the visable page.

Is there any way round this just using xhtml and css, needs to validate to strict xhtml on here too: http://validator.w3.org/

Cheers.

[rspassey]

I'm sorry, but I dont even have a scroll bar, am I misinterpreting something?

[Tiestarian]

Hmmm, what resolution are you using?

*Edit - Just added a load more content to the page so you should see what I mean now..

[rspassey]

Page is the same, no scroll. resolution = 1280 x 1024

[Tiestarian]

Hmm ***. Couldn't post a screenshot by any chance could you?

[rspassey]

Ahh, now that you added the "test" (which wasn't there after my last page view where I said the site looked the same) I see what you mean, the white menu does cut off.

What if you set the height to be "auto" (I am new to CSS, and want to impliment it into my sites, and have been reading lots on it, but haven't been able to try anything out, so I am just proposing ideas)

#mainmenu { line-height:36px; font-size:18px; background-color:white; color:gray; position:absolute; top:0%; left:0%; height:auto; width:14%; text-align:center; }

[catacon]

Auto sets it to only how long it needs to be. I think 100% does the same. For a simple design like yours, you just use table, which would fix your problem.

[Tiestarian]

Originally Posted by catacon Auto sets it to only how long it needs to be. I think 100% does the same. For a simple design like yours, you just use table, which would fix your problem.

Yeah that's what i'd do normally.. but it's for a uni assignment and i'm not allowed to use tables.

Auto doesn't work either

[catacon]

I found a solution for you.

Make an image that is plain white (looks like 150x5 would work for you, I did 200x5). Then add the code to your CSS file. The menu division is the left menu and the content is everything on the right. THe only problem with this is, when the browser is too small, the content disappers into the left menu. To fix this, you could make the #menu image smaller and make the #content width less (75%, 70%,etc).

	
	body {
		  background-color: black;
		  background-image: url(white.jpg);
		  background-repeat: repeat-y;
		  background-attachment: scroll;
		  color: white; }
	#menu {
		   color: black;
		   width: 200px;
		   height: 100%;
		   float: left; }
		   
        #content {
			height: 100%;
		        width: 80%;
			  color: white;
			  float: right;
			  text-align: left; }

[Tiestarian]

Originally Posted by catacon I found a solution for you. Make an image that is plain white (looks like 150x5 would work for you, I did 200x5). Then add the code to your CSS file. The menu division is the left menu and the content is everything on the right. THe only problem with this is, when the browser is too small, the content disappers into the left menu. To fix this, you could make the #menu image smaller and make the #content width less (75%, 70%,etc). body { background-color: black; background-image: url(white.jpg); background-repeat: repeat-y; background-attachment: scroll; color: white; } #menu { color: black; width: 200px; height: 100%; float: left; } #content { height: 100%; width: 80%; color: white; float: right; text-align: left; }

Hmmm, can't get that to work for some reason It's just screwing up the text on the menu.

*Edit - Oh sorry it did work, i'd changed something earlier and forgot to put it back. Legend, Cheers

So is there no way to resize that background image with a percentage?

[catacon]

I can't find how to do that. You can make the image smaller, but I don't beleive you can change the background size.

[Tiestarian]

Ah ok no probs.. that should be a good enough fix anyway, cheers