Can't get Expanding Middle Div

Hello Everyone,

I'm new here, I have this problem with this website that I cannot get worked out.

I'm creating a page that will expand vertically and horizontally.

Expanding horizontally isn't a problem, it's the vertical one that is.

To simplify the site I created, I'm just going to use 3 divs as an example.

I have a header div, which is a fixed height, b/c it uses banner images that I don't want to stretch.

Then there's the bottom div, which is basically another banner which I do not want to stretch.

Now here lies my problem, I want the middle content Div to stretch to fill the remaining space from the header and bottom div as the resolution changes or the browser is resized without generating the dreaded scrollbar

I know this is mixing fixed heights and percentages, which complicates things. Can this be done, where you have a fized size header and footer with a expanding middle to fit a browser window?

Thanks for any help

Here is some simple code of what I'm trying to do, as you can see, the bottom box dissappears and the browser scroller appears when you try to resize the window:
<style type="text/css">
#header{
height: 200px;
width: 100%;
border: 1pt solid black;
}
#content{
height: 50%;
width: 100%;
border: 1pt solid black;
}
#footer{
height: 200px;
width: 100%;
border: 1pt solid black;;
}



</style>
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>

Keep in mind that a percentage height has no effect for an element in the normal flow if its containing block has no explicitly set height.

For this kind of layout one would probably have to do something like this:

html, body {
height: 100%;
}

If you need more advice we probably need a link to the page so that we can inspect for ourselves.