I need to find a cross browser way of having two divs contained in a parent div where the first child has a fixed height and the second flows down to be contained in the parent.

`<div id="parent"><div id="header"></div><div id="body"></div></div>`

```
     height: 500px
 _____________________
|  _________________  |
| |  height: 20px   | |
| |_________________| |
|  _________________  |
| |                 | |
| |                 | |
| |  height: 100%   | |
| |                 | |
| |                 | |
| |_________________| |
|_____________________|

```

So the parent has a fixed height of 500px, the header div has a fixed height of 20px but the body div's height must flow down to fit inside the parent. Giving it a height of 100% overflows it's height by 20px because height:100% uses the parents height not taking into account the children. I saw a solution using position absolute but this does not work on IE7 or 6. Is there a cross browser solution for this as it is a relatively simple layout?

**Edit:** Forgot to mention that the parent will be resizable so will not always be 500px. Using jquery resizable, the parent dimensions could be anything and will change often.

**Edit 2:** I wish I could credit multiple people for this solution as I took advice from everyone. Basically I gave `#body` a height of 480px and used the alsoResize option in resizable to resize the parent and the body.