can't achieve 100% height in left-side nav

Forum Moderators: not2easy

Message Too Old, No Replies

can't achieve 100% height in left-side nav

background and border stops short

srf124

5:50 pm on Jan 28, 2005 (gmt 0)

Am finally using CSS to layout website. Everything is behaving well, except for left navigation. The navigation uses a tiny bit of javascript for a expandable menu. Problem is, the left navigation only expands to a certain point. Looks fine when there's little content, but when content is lengthy, the nav background and border just stops short (seems to be that the menu is driving it's height, but adding to css -- body {height: 100%} -- does nothing.

The other problem is, in Mozilla/Netscape, the bg/brdr will not expand when opening submenus of javascript-driven menu (although this is not a issue in Explorer).

Does anyone have any thoughts?

ahmedtheking

11:56 pm on Feb 1, 2005 (gmt 0)

Try height:auto!

ahmedtheking

11:56 pm on Feb 1, 2005 (gmt 0)

without the! at the end...

height: auto;

hehe! :D

Gooner

12:18 am on Feb 2, 2005 (gmt 0)

Hi
Auto will not work without the parent tag having a height value.

Im having the same problem. I have followed the instructions given in a helpful reply to someone else at

[webmasterworld.com...]

but it does not work for me.

My css file can be seen at <No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>

can anyone see my error.

[edited by: SuzyUK at 10:18 am (utc) on Feb. 2, 2005]

ahmedtheking

12:39 am on Feb 2, 2005 (gmt 0)

Ok, try changing your layers position to relative...

Gooner

12:42 am on Feb 2, 2005 (gmt 0)

Ive had to use relative position on parent div and absolute on child divs to get position of all divs to work correctly.

ahmedtheking

12:48 am on Feb 2, 2005 (gmt 0)

What about using relative on the children?

Gooner

12:55 am on Feb 2, 2005 (gmt 0)

Using relative throughs out all positions had this fix earlier from someone else to get round my positioning problem and it worked.

The 100% height is my next problem to try and get round.

ahmedtheking

1:22 am on Feb 2, 2005 (gmt 0)

I see that your navigation is hidden, but i don't know why. I don't think it is because of this height problem, what happens if you add a fixed height?

srf124

2:10 am on Feb 2, 2005 (gmt 0)

So...could someone have a look at my css and perhaps clue me in to how I can get the 100% height in the left-side nav?

might it be a problem in the css that drives my left-side nav menu which is at?

and obviously now, the website i'm doing this all for is at <No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>

[edited by: SuzyUK at 10:20 am (utc) on Feb. 2, 2005]

SuzyUK

10:32 am on Feb 2, 2005 (gmt 0)

Hi all.. that post that gooner refers to has been recently discussed [webmasterworld.com] re: the 100% height dilemma.

Not sure if it will help you both, I'm assuming that we're talking about absolutely positioned divs in both cases?

srf124, the javascript drops might not be an issue if you can get the main nav's height set correctly first?

The main jist is that those absolutely positioned navs/sidebars need height for IE and min-height for others as well as having the height: 100% set on the <body>
(note: do not set height on the HTML element just the body or there will nowhere for the them to "stretch" into)

Suzy