How do I set 1 cell to a fixed height, and the other to the rest of the page? Tables, divs, etc...

[rocketmonkeys]

The below mangled garbage is a fixed text illustration. I'll try to
describe the problem. This is a general web layout problem I've had
for a while, not confined to this specific case. I would like to have
a block of a fixed size (Say, a DIV on the top of the page of height
100px) and a block filling the rest of the page (in this example, a DIV
with height of PAGE_HEIGHT - 100px).

Is there any way to do this, either cleanly or hacked? Any ideas?

I've tried tables, div's (floats, layers, etc), and even div's with
javascript resizing code. The javascript came close, but had it's own
problems (if a DIV is oversize for any reason, javascript goes into
infinite resize loop).

I've tried this:

<style>
body {
height:100%;
margin:0px;
}
</style>

<table width="100%" height="100%" border="1">
<tr>
<td id="fixed_width" height="100" bgcolor="blue">
<!-- Fixed with top cell -->
</td>
</tr>
<tr>
<td id="rest_of_page" bgcolor="red">
<!-- Expanding bottom cell -->
</td>
</tr>
</table>

No matter what height I put on the bottom cell, it doesn't do what I
want: fill all of the page except the top 100px.

DIV's dont work either. I can have a top DIV of height 100px, but what
is the bottom DIV's height? 100% - 100px, whatever that is.

Any ideas?

-James

- --------------------------- -
| | | |
Whole | | | | 100px
page | | | |
height | --------------------------- - -
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | | Remainder
| | | | ( Page height
| | | | -100px)
| | | |
| | | |
- --------------------------- -