Dynamic and fixed div heights - css

Question

I'm trying to create a div containing 3 different divs: the header, the content and the footer. The header and the footer have fixed div and are positioned on the top and on the bottom of the container div. The content should fill the remaining available space and dynamically adapt when the container div is resized, with an overflow: auto and a max-height corresponding to the remaining space of the container.
How can I achieve this behavior ?
#container
#header
#body
#footer
#container {
display: table;
height: 300px;
width: 300px;
}
#container #header {
background: #888;
height: 30px;
width: 100%;
display: table-row;
}
#container #body {
background: #777;
display: table-row;
height: 100%;
max-height: 100%;
overflow: auto;
width: 100%;
}
#container #footer {
background: #888;
display: table-row;
height: 30px;
width: 100%;
}
Here is what I already have. The problem here is that the #body won't accept any max-height parameter and resize itself according to its content.
Demo http://jsfiddle.net/deHvH/1/, with jQuery UI Resizable http://jsfiddle.net/deHvH/2/
EDIT: the flexbox model is what I needed.

Answer 1

You can adjust the max-height accordingly with the following CSS.
#container {
height: 300px;
width: 300px;
}
#container #header {
background: #888;
height: 30px;
width: 100%;
}
#container #body {
background: #777;
max-height: 200px;
overflow: auto;
}
#container #footer {
background: #888;
height: 30px;
width: 100%;
}
Did this solve your concern?

Answer 2

The flexbox model was what I needed !
#container {
display: table;
height: 300px;
width: 300px;
display: box;
}
#container #header {
background: #888;
height: 30px;
}
#container #body {
background: #777;
box-flex: 1;
overflow: auto;
}
#container #footer {
background: #888;
height: 30px;
}