動的なdivの高さを固定

Question

私は、3つの異なるdiv：ヘッダー、コンテンツ、およびフッターを含むdivを作成しようとしています。ヘッダーとフッターには固定divがあり、コンテナdivの上部と下部に配置されています。コンテナdivのサイズが変更されたときに、コンテナの残りのスペースに対応するoverflow：autoおよびmax-heightを使用して、コンテンツは残っている使用可能なスペースを満たし、動的に適応する必要があります。 この動作をどうすれば実現できますか？

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

これは私がすでに持っているものです。ここでの問題は、#bodyがmax-heightパラメータを受け入れず、内容に応じてサイズを変更することです。 デモhttp://jsfiddle.net/deHvH/1/、jQuery UIサイズ変更可能http://jsfiddle.net/deHvH/2/

EDIT：フレックスボックスモデルは必要なものです。

Answer 1

フレックスボックスモデルが私の必要なものでした！

#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

これに応じて、次の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%; 
} 

これが問題を解決しましたか？