I want two horizontal areas in my webpage. The first one is the menu. It's on the top. Unfortunately I don't know its size, and it might change in response to user actions. Below the menu is the main area which should stretch at least as far as the bottom of the window (if there is little content) or beyond (if there is a lot of content.

To illustrate with ASCII art:

+----------------------------------------------------+
| This area resizes vertically depending on contents |
+----------------------------------------------------+
| This area stretches to the bottom of the window,   |
| but can be even larger if necessary. Note: this    |
| should be a separate area because it will contain  |
| children with height:100% as well.                 |
|                                                    |
+----------------------------------------------------+

Can this be done? Can it be done with Javascript?

Added: To put things in perspective and avoid confusion, think of it this way: the top menu is generated by myself, but the bottom area is an IFrame which I want to fill the rest of the page. This is what it eventually comes down to anyway in my case.