Okay,
What I'm trying to do is create two boxes, one on top of the other.
The first is a static height, the 2nd, underneath it, should take up
the remaining amount of screen space and overflow with its own
vertical scrollbar for any extra content.
I've managed to come up with this, which works perfectly in Mozilla,
but fails in IE:
<body style="width: 99%; height: 98%">
<div style="position: absolute; top: 0px; left: 0px; width: 100px;
height: 50px; border: solid green 1px">
Top box.
</div>
<div style="position: absolute; top: 100px; bottom: 0px; width: 100px;
border: solid blue 1px; overflow: auto">
Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>
Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>
Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>
Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>
Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>
Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>
Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>
Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>
Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>
Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>
Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>Bottom box.<p>
</div>
</body>
(Note: I'm setting the width and height of "body" to 99% and 98%
respectively so that I don't get scrollbars for the browser window
itself.)
In IE, the 2nd DIV's "bottom: 0px" declaration is completely ignored
and I end up with a browser window vertical scrollbar as the DIV
overflow doesn't take effect.
It took me a long time to come up with the (now) intuitive method of
setting the top and bottom properties of the 2nd box - when it worked
(in Mozilla) I was overjoyed. But that quickly disappeared when I
realised that IE messed it up.
I'm assuming here that Mozilla is properly applying the standards, and
IE is not. How can I work around this? (Javascript is not acceptable.)
Note that my main problem here is that I can't use "height: 100%" on
the 2nd DIV because then it will extend below the bottom of the
browser window. Nor can I determine either a percentage or pixel
height that will scale to fit a variable screen height. (This could be
solved if I could use something like "height: 100% - 100px" - but that
kind of calculation isn't valid.)
An alternative way of looking at this problem is - how do I do the
equivalent in CSS:
<frameset rows="50,*">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
I did come up with a total hack, but it's problematic at best:
Have both DIVs start at the top of the page, one can be "50px", the
other "100%", but have the 1st DIV with a higher z-index, and the 2nd
DIV with an embedded 3rd DIV that uses "margin-top: 50px".
The problem with this, however (in addition to just being totally
wrong), is that the vertical scrollbar of the 2nd DIV ends up
extending all the way to the top of the browser window and interfering
with elements of the 1st DIV...
Does anybody have any ideas here?
