Previous Message
Next Message

RE: [css-d] Thoughts on doing vertical layout with height:100%

Sent by Rieselbach, Erik on 31 January 2002 18:06


Joshua Prowse: "Blue Part: I want a bar along the top of the page
that is a fixed height (and 100% width).
> Green Part: I then want a main body area to take up the remaining area of
> the page."
> 
If you want the blue part to be always visible and not scroll off the top of
the screen, then you're out of luck. Otherwise this should do the trick:

...

<style type="text/css">
  html { height:100%; }
  body { height:100%; margin:0; padding:0; }
  #top { position:absolute; top:0; left:0; width:100%; height:100px;
background-color:blue; color:inherit; z-index:1;}
  #bottom { width:100%; height:100%; background-color:green; color:inherit;
z-index:0; }
  #bottomcontent { padding-top:100px; }
</style>

...

<body>
<div id="top">
  stuff<br />stuff
</div>
<div id="bottom">
  <div id="bottomcontent">more stuff<br />more stuff</div>
</div>
</body>
...

Because, as Andrew Clover will tell you, you can't subtract a pixel value
from a percentage, you need to fill the screen with the green background,
then stack the blue top bar on top of it. Then you have to push the content
of the green down below the blue bar.

Of course, depending on what you want, you could simply set the background
color in body {}, then get rid of the absolute positioning, top, and left
values in the blue bar, then just add additional divs below at width:100% as
necessary.

Note: Mac IE5 creates a vertical scrollbar whenever you have something with
"height:100%" nested inside something else with "height:100%". (And without
the nesting no color will be used at all.) But the code above works in
NS6.2/Mac, and should work for both IE and NS/Moz in Windows too (my Windows
machine is unavailable for testing right now).

best,

Erik Rieselbach
Previous Message
Next Message

Message thread:

Possibly related: