底部div渲染后如何使頂部div填充剩余高度？ （沒有flexbox）

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 +）和移動瀏覽器（例如Android 4.4+），因此基於flexbox的布局不可用。 我嘗試了Javascript（使用JQuery）來嘗試設置

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

但由於某些原因，瀏覽器在頁面渲染期間錯誤報告了底部div高度（Win 7上的最新Chrome），因此結果顯示錯誤。 並且我想盡可能避免使用JS（如果解決方案可行，請打開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>