div height of page

Need height to always equal the height of the page

[PitMonkee]

I'm trying to get a div to be a bar that goes from the top of the page to the bottom of the page. I thought that height: 100% would work, but it doesn't work in every browser. The markup is just:

<div id="rightBar"> </div>

and the css is:

#rightBar {
position: absolute;
z-index: -10;
right: 25px;
margin-top: 10px;
margin-bottom: 0px;
width: 125px;
height: 100%;
min-height: 100%;
border: 1px solid #797979;
border-bottom: 0px;
background-color: #eee;
}

body and html are both set to height: 100%

On IE and Opera, it seems to work fine. On Netscape, it doesn't even show up. In Mac IE, it doesn't go all the way to the bottom of the page, and I don't think it shows in Safari, either. Does anyone know how to make the height follow the size of the page, even if the height needs to be bigger than the viewport? Thanks, guys.

[edited by: Nick_W at 8:29 pm (utc) on June 4, 2003]
[edit reason] see sticky mail [/edit]

[drbrain]

position: absolute;
z-index: -10;

You're putting the div behind the body (or whatever parent it has), do you really want this?

It's all about the DOM Inspector

[PitMonkee]

I read in a css book that even if it's negative, it can't be behind the body...so I guess it's okay.

[drbrain]

The book is wrong, if you look at CSS2 Section 9.9 Layered presentation [w3.org] you'll see that there are no restrictions on the z-index of elements relative to the body or root elements. Both Mozilla and Safari put the div behind the body, exactly as you requested. (To be most correct, your div is behind the html (root) element because it establishes your stacking context.)

Why do you need a negative z-index anyways? Why not leave it at the initial 'auto' value?

[PitMonkee]

When it was on auto, it would show above another div that I wanted above it, even if I set the z-index to some arbitrary large number.

[drbrain]

That's a separate problem, why not start a new post with a short, concise fragment of CSS and HTML that exhibits the behavior?

Then we can help you get your stacking right.

[PitMonkee]

I changed the z-index on that div to 0, and just increased the other divs' z-index...now it works. But I still don't know how to get the bar to follow the bottom edge of the page.

[PitMonkee]

So anyways...back to the main problem...I have no idea how to make the bar stay as long as the body of the page...I've tried everything I can think of...does anyone have any idea?

[Storyteller]

With current browser support, you can't practically do it. I've spent quite some time struggling with this issue a while ago.

If you want navigation bar stretch to the full height of the page, you can do it like this:

body {
background: url('bar_background.gif') repeat-y;
margin-left: 200px; /* width of your bar */
}

#bar {
position: absolute;
top: 0;
left: 0;
width: 200px; /* width of your bar */
}

This way your bar's DIV will not be 100% height, but it will look like it is because of colored left margin area.

[PitMonkee]

I did what you suggested with the background image, and this is what I came up with:

body {
margin: 0;
margin-top: -10px;
height: 100%;
background-image: url(images/background.gif);
background-position: 100% 15px;
background-repeat: repeat-y;
}

I wanted it on the right side, because I like the idea of the nav bar being on the side where the cursor is usually located: the scrollbars. However, I have a heading box that I wanted to sit about 5-10px below the border of the body, and I didn't want the bar to be seen above it. Therefore, I placed a small spacer <div> above the heading box with a background color of #fff, and it served to push the heading box down, while blockout the background image at the same time. The reason why the body margin is -15px is because for some reason, NS 6.2 would still have a small space above the spacer where you could see the bg image. I made the margin negative, and made the spacer a tad bigger, and now my layout looks perfect in IE 6, NS 6.2, Opera 7, Mac IE 5.2, and Safari! Thanks for the help, guys..it's really appreciated.