Fixed height upper box, bottom box filling rest of screen.
Posted: Tue Sep 09, 2003 10:14 pm
I'm talking about building a Web page using CSS here.
I fought with this one for several days until I hit on the solution. Essentially, I wanted a way of having the bottom box's height be "100% - X pixels", and give it an overflow scrollbar. But you can't mix percentages and unit measurement.
This is based on a thought I had about using overlapping DIVs with a z-index and padding.
There are a few minor rendering differences between IE and Mozilla that are too small to be argued over. The only really visible effect here is that the vertical scroll extends all the way from the top of the browser window to the bottom, rather than from the top of the second box down. However, since I've used embedded DIVs with padding, I made sure that the vertical scrollbar was far enough to the right of the first box so that it didn't disappear behind it.
I should note that this is effectively the same thing as using "position: fixed" (with the higher z-index) for the top box. But since IE doesn't understand "fixed" - this is also a neat non-javascript workaround to produce the same effect in this case. (No doubt it could be expanded on for more complex formatting also.)
I fought with this one for several days until I hit on the solution. Essentially, I wanted a way of having the bottom box's height be "100% - X pixels", and give it an overflow scrollbar. But you can't mix percentages and unit measurement.
This is based on a thought I had about using overlapping DIVs with a z-index and padding.
There are a few minor rendering differences between IE and Mozilla that are too small to be argued over. The only really visible effect here is that the vertical scroll extends all the way from the top of the browser window to the bottom, rather than from the top of the second box down. However, since I've used embedded DIVs with padding, I made sure that the vertical scrollbar was far enough to the right of the first box so that it didn't disappear behind it.
I should note that this is effectively the same thing as using "position: fixed" (with the higher z-index) for the top box. But since IE doesn't understand "fixed" - this is also a neat non-javascript workaround to produce the same effect in this case. (No doubt it could be expanded on for more complex formatting also.)
Code: Select all
<body style="margin: 0px; padding: 0px; height: 100%">
<div style="position: absolute; background-color: white; top: 0px; left: 10px; width: 400px; height: 120px; z-index: 99">
<div style="width: 400px; height: 10px"></div>
<div style="width: 400px; height: 90px; border: solid black 1px">
This box will always be visible, despite what happens below.
</div>
</div>
<div style="position: absolute; top: 0px; left: 10px; width: 420px; height: 99%; overflow: auto">
<div style="padding-top: 130px; padding-bottom: 1px; width: 400px">
<div style="border: solid black 1px">
This "apparent" box will remain at 100% of the remaining vertical
height (less a 20px amount of whitespace between the two boxes),
and any resulting vertical scrollbar, while covering the entire
height of the screen, will still be enough to the right so that
it doesn't get hidden "behind" the top box.
<p>
I had to do some fiddling with the width of the embedded
DIVs comprising the bottom "box" so that the apparent widths would
be the same. However, IE 6 shows the bottom box being 2 pixels
wider than the top box, whereas Mozilla shows them as the same
width. In order to make sure that the two pixels on the right
remain hidden behind the upper box, we have to live with a
slightly narrower bottom box in Mozilla.
<p>
There seems to be some padding between the bottom border of
the second box and the text that I can't figure out.
<p>
Also, in order to have Mozilla show the bottom border of the
second box, I had to had a 1 pixel bottom padding to the
middle embedded DIV. (IE showed the bottom border just fine
without this.)
<p>
The embedded DIVs in the first box are purely for whitespacing
between the boxes and the top of the browser window. I note,
however, that IE renders with more whitespace around the top
box than does Mozilla.
</div>
</div>
</div>
</body>