On 2006-11-10, Andy Fish <aj****@blueyonder.co.ukwrote:
Hi
I have quite a simple requirement. at the top of a page I would like to have
a fixed-height area (which will be used as a "toolbar") and the main the
content will be in the bottom part whch needs to occupy the rest of the
window and scroll of necessary. so the behaviour i'm looking for is similar
to having 2 frames but all in one page.
the following works fine in IE but not in firefox:
<body>
<table width="100%" height="100%">
<tr height="50">
<td>top bit</td>
</tr>
<tr>
<td>
<div style="OVERFLOW: auto; HEIGHT: 100%">
... lots of content in here....
</div>
</td>
</tr>
</table>
</body>
it's easy with fixed heights, but I want the bottom portion to always take
up the remainder of the window.
any idea how I can do this in a browser-independent way ?
I think the difficulty here is setting the div to be 100% the height of
its containing block, which is the <td>. But the <td>'s height depends
on its content, so I think Firefox is (as the spec says it should)
ignoring the 100% and using "height: auto" for the div instead.
And anyway, you don't want the div to be 100% of the viewport, because
then you'll get a scrollbar within the div, and another little scrollbar
on the viewport to take you the extra 50px or so to the bottom of the
div.
This is easier without tables. Try something like this (don't know if it
will work in IE):
<html>
<head>
<style type="text/css">
div
{
position: absolute;
border: 1px solid black; /* just for illustration */
left: 0;
right: 0;
}
#toolbar
{
top: 0;
height: 50px;
}
#main
{
bottom: 0;
top: 52px; /* +2 because of the borders */
overflow: scroll;
}
</style>
</head>
<body>
<div id="toolbar">
Top bit
</div>
<div id="main">
... content ...
</div>
</body>
</html>
