如何使div填充絕對底部div的剩余空間

Question

我實際上有2個div疊加在父容器中。 第二個div是絕對的，設置在容器的底部。 我現在想讓第一個div的高度填充絕對值剩下的剩余上部空間。 我查了一下，但只找到了絕對div在頂部而不是底部的解決方案。 我該怎么辦？

 .container { height: 100px; position: relative; background-color: red; } #row1 { background-color: blue; overflow: auto; } #row2 { background-color: yellow; position: absolute; width: 100%; bottom: 0; } 

 <div class="container"> <div id="row1"> Row 1 content </div> <div id="row2"> Row 2 content </div> </div> 

這是我的代碼片段，以便更清晰： https ： //jsfiddle.net/ekm7y1nz/

編輯：我擔心row2必須是絕對的，因為如果row1的內容太長，我不應該向下滾動查看它。 如果row1太長，則只能滾動它。

Answer 1

就個人而言，我只是去靈活路線。 干杯

 .container { height: 100px; display: flex; flex-direction: column; background-color: red; } #row1 { background-color: blue; flex: 1 0 auto; } #row2 { background-color: yellow; } 

 <div class="container"> <div id="row1"> Row 1 content </div> <div id="row2"> Row 2 content </div> </div> 

Answer 2

如果您的問題只是滾動，您可以將row1的css更改為：

#row1 {
  background-color: blue;
  height: 100%;
  width:100%;
  overflow:auto;
}

當文本變得大於它的div父級時，頁面將滾動。

另外，如果您對使用它們感興趣，可以使用js或css框架（如sass）基於row1設置row2的div高度。