Height 100% - Has this been figured out yet?

CSS- Setting Page Height

[madcat]

I thought someone had figured this one out a while back but couldn't remember. Even when you set the body and div to 100% (say it's a navigation div), and you fill up the Content div past the browser window height- the nav div gets cut off. Is there a way using CSS to fill the entire background 100% no matter what content is in the page. For example, you have a Content div and a Nav div-the Nav div has a blue background and the Content a white. The Nav div should fill then entire right hand side of the screen from top to bottom.

Can this be done?

Thanks-

[TheDoctor]

Not quite sure what you mean, but would setting the background-color of the body to blue and the background-color of the Content div to white solve your problem?

Or have I misunderstood what you're after?

[madcat]

Say you have your stylesheet like so:

body {height: 100%;}
#content {position: absolute; left: 0; width: 70%;}
#nav {position: absolute; right: 0; width: 30%; height: 100%; background: #00f;}

#nav successfully spans 100% of the browser window. But, when your #content information exceeds the length of the browser window #nav will end...so the blue background will stop at that point. I'm wanting it to always take up the entire right hand 30% from top to bottom.

See what I mean? It might not be possible.

[bluecorr]

Yes you can. You can create a background image 1px high and 1200px wide or whatever. The first 400px should be blue and the rest white. If you apply this image to the content div it will repeat itself vertically even if the navigation stops at one point. You can't however use it when the navigation is 30% (the div will stretch at higher resolutions while the image won't).

Another solution is having a white image repeat itself horizontally and vertically in the content box but have it positioned 30% off the left. That should work I think.

Bottom line, the solution lies in working with the background of the content box not of the navigation.

[TheDoctor]

The solution, as bluecorr says, is to work with the content, not the nav.

Thus, in your example, what you should do is:

body {background: #00f;}
#content {position: absolute; left: 0; width: 70%; background:white;}
#nav {position: absolute; right: 0; width: 30%;}

I don't think you need to construct an image. I don't think the "height" styles are needed either.

[TheDoctor]

I've just had a thought about what I posted. You'll need, of course, a height style on #content, just in case its actual content doesn't cover 100% of the screen - otherwise you get the opposite problem to the one you're getting now!

[madcat]

This might just be crazy enough to work :)

[moonbiter]

Here's another way of doing it:

body { margin: 0; padding: 0; background: #00F; }
div#content { float: left; width: 70%; background: #FFF;}
div#nav { margin-left: 70%; font: bold 10px Verdana, sans-serif; color: #FFF;}

You'll have to play with the padding and margins to get it to look good (I'd suggest setting them on the child elements of these containers using descendant selectors [w3.org]) You'll also possibly notice that it is slightly buggy in MSIE in those cases in which the nav text is longer than the content.

Another note is that if you don't have a padding set for these container elements that you'll get odd results in Mozilla once you fill them with content elements that has margins (specifically, if a container element doesn't have a padding set, then the margins of contained elements will be applied to the body element. Experiment to see what I mean.

A final note: if the nav is never longer than the content, you can take out the margin-left declaration in the div#nav element.

[madcat]

Thanks!

You'll also possibly notice that it is slightly buggy in MSIE in those cases in which the nav text is longer than the content.

This thing has to be solid in 5 &^ browsers absolutely. What about when the padding is set to zero?

It seems that positioning the <div>'s absolute instead of float will hold up stronger. Is that the general consensus at this point?