Middle Div height to 100%

Hello,
I am trying to create a page that would act like frames but in CSS.
I have a header, mainContent and a footer div.

I cant for the life of me set the height of the mainContent Div to 100% without the scrollbar growing larger than the page.
I know I could set the scrollbars to hidden but I need the height of the mainContent Div to be the exact difference between the header and footer because I will be using that elements offsetHeight in JavaScript.
Any ideas on how to create something like this without javascript ?

[code]
———————————————————-

|
| header

|
———————————————————-

|
| [B]HOW TO SET MIDDLE HEIGHT?[/B]
|
|
|
|
|
|
|
|———————————————————-
| footer
|———————————————————-
[/code]

I can do it through JavaScript like so…

[code=php]

var bottomPanel = getEl(‘bottomPanel’);
var headerPanel = getEl(‘headerPanel’);
var top = headerPanel.offsetHeight;
var bottom = bottomPanel.offsetHeight;
var middlePanel = getEl(‘middlePanel ‘);
middlePanel .style.height = getDocumentSize().height – top -bottom + “px”;

[/code]

but I am hoping there is a CSS way…

Drew

Also in #CSS _↴