如何獲取頂部div來填充底部div渲染後的剩餘高度？ （無彈性盒）

Question

三個div分別位於父容器內。頂部div是固定高度。底部div的內容佔用了未知數量的垂直空間，但需要顯示其中的所有內容。頂部div應填充剩餘的垂直空間。每

<div id="container"> // 100% of visible window height but should not overflow 
    <div id="top"> // Fixed height 
    </div> 
    <div id="middle"> // Use remaining vertical space 
    </div> 
    <div id="bottom"> // Unknown height but contents should all be shown 
    </div> 
</div> 

我需要支持最近十歲上下的傳統瀏覽器（例如IE9 +）&移動瀏覽器（例如安卓4.4或以上版本），因此基於Flexbox的佈局了。我試圖使用Javascript（使用JQuery）來嘗試並設置

middle div height = container height - (top div height + bottom div height) 

但出於某種原因，瀏覽器被錯誤報告頁面在底部的div高度渲染（在Win 7最新的Chrome），這樣的結果就出來了錯誤。如果可能的話，我想盡量避免使用JS（如果解決方案正常運行，則需要打開）。

需要儘可能多地支持桌面和移動瀏覽器。 感謝

Answer 1

對於舊的瀏覽器，在flex不能使用，display:table可以回退但佈局將能夠增長近窗口的高度，其中的內容太長，一次顯示。

一個CSS只混合使用flex和table爲其中不支持flex後備：https://codepen.io/gc-nomade/pen/BdWXpp

下面，只有display:table/table-row CSS（這適用於幾乎所有的瀏覽器（IE8和下一個片段）

html, 
 
body, 
 
#container { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    display: table; 
 
    background: turquoise; 
 
} 
 

 
#container>div { 
 
    display: table-row; 
 
} 
 

 
.buffer { 
 
    display: table-cell; 
 
    /* display is optionnal but element is required in HTML to keep layout as a single column and allow vertical-align to content*/ 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
#top { 
 
    background: orange; 
 
    height: 100px; 
 
} 
 

 
#middle { 
 
    height: 100%; 
 
} 
 

 
#bottom { 
 
    background: tomato; 
 
}

<div id="container"> 
 
    <div id="top"> 
 
    <div class="buffer">top 100px, test me full page and in any medias 
 
    </div> 
 
    </div> 
 
    <div id="middle"> 
 
    <div class="buffer">Use remaining vertical space 
 
    </div> 
 
    </div> 
 
    <div id="bottom"> 
 
    <div class="buffer">Unknown height<br/> that fits <br/>to content to hold 
 
    </div> 
 
    </div> 
 
</div>