如何使div填充绝对底部div的剩余空间

Question

I'm actually having 2 divs that are superimposed in a parent container. The second div is absolute and is set to the bottom of the container. I want now to make the first div's height fill the remaining upper space left by the absolute one. I've looked it up but only found solutions to when the absolute div is at the top and not at the bottom. How should I do it ?

 .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> 

Here is my code snippet for more clarity: https://jsfiddle.net/ekm7y1nz/

EDIT: I'm afraid the row2 has to be absolute because I shouldn't have to scroll down to see it if the row1's content is too long for example. Only row1 should be scrollable if it's too long.

Answer 1

Personally I'd just go the flex route instead. Cheers

 .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

if your problem is just scrolling you can change row1's css to this :

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

the page will scroll when text gets bigger than it's div parent.

alse you can set row2's div height based on row1 with js or css frameworks like sass if your interested in using them.