Dynamische und feste Div-Höhen

Question

Ich versuche, ein Div mit 3 verschiedenen divs zu erstellen: die Kopfzeile, den Inhalt und die Fußzeile. Der Header und die Fußzeile haben feste Div und sind auf der Oberseite und auf der Unterseite des Containers div positioniert. Der Inhalt sollte den verbleibenden verfügbaren Speicherplatz ausfüllen und dynamisch angepasst werden, wenn die Größe des Container-Divs geändert wird, mit einem Überlauf: auto und einer maximalen Höhe, die dem verbleibenden Speicherplatz des Containers entspricht. Wie kann ich dieses Verhalten erreichen?

#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%; 
} 

Hier ist, was ich bereits habe. Das Problem hierbei ist, dass #Body keinen max-height -Parameter akzeptiert und sich entsprechend seinem Inhalt ändert. Demo http://jsfiddle.net/deHvH/1/, mit jQuery UI Resizable http://jsfiddle.net/deHvH/2/

EDIT: das Flexbox Modell ist das, was ich brauchte.

Answer 1

Das Flexbox-Modell war was ich brauchte!

#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; 
} 

Answer 2

Sie können die maximale Höhe entsprechend mit dem folgenden CSS anpassen.

#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%; 
} 

Hat dies Ihre Bedenken gelöst?