I need a div with a settable (by javascript) size. Within this div there should be three divs. A header with 30px height and 100% width, a footer with same height and width as the header. Between the two, i need to have a div for content, which takes up the remaining space, where a scrollbar should appear when the content is too large.

<div id="myDiv">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>

I have tried different combinations of padding, margin, floating, positioning etcetera, but i cannot get it to work. The problem is, i need the outer div to be resizable with YUI components. Otherwise, it would be easy. But now, i need the height of the body div to be flexible.

Which css will be the solution for me?