動態和固定的div高度

Question

我試圖創建一個包含3個不同div的div：頁眉，內容和頁腳。頁眉和頁腳有固定的div，並位於容器div的頂部和底部。內容應填充剩餘的可用空間，並在容器div被調整大小時動態調整，使用overflow：auto和與容器剩餘空間相對應的最大高度。 我該如何實現這種行爲？

#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不會接受任何最大高度參數，並根據其內容調整自身大小。 演示http://jsfiddle.net/deHvH/1/，與jQuery UI可調整大小http://jsfiddle.net/deHvH/2/

編輯：flexbox模型是我所需要的。

Answer 1

flexbox模型是我需要的！

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

這是否解決了您的疑慮？