如何使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高度。