Middle Div height to 100%

[cgishack]

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 ?


----------------------------------------------------------
|
| header
|
----------------------------------------------------------
|
| HOW TO SET MIDDLE HEIGHT?
|
|
|
|
|
|
|
|----------------------------------------------------------
| footer
|----------------------------------------------------------


I can do it through JavaScript like so...


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";



but I am hoping there is a CSS way...

Drew

[Centauri]

Is this (http://www.cssplay.co.uk/layouts/basics2.html) something like what you want to do ?

[cgishack]

It is close ... I would like the scroll bar to be in the middle div.
I wonder if I can make this one work.
Thanks for the link

[mshalabi]

make the Middle div fixed height and {overflow:scroll}