Positionierung absolute Höhe Element innerhalb relativ

Question

Bitte helfen Sie mir, die Quest zu lösen. Wir haben 3 Div-Blöcke. Die Höhe des ersten Divs ist auf 100px eingestellt (aber in der Realität ist es ein dynamischer Wert). Der zweite Block hat eine feste Höhe und einen anderen Block als Kind. Der untergeordnete Block sollte die Höhe bis zum unteren Bildschirmrand haben. Aber da unser zweiter Block relativ ist, bedeutet unten: 0 den unteren Teil des zweiten Blocks. Was ist die beste Praxis für solche Fälle, bitte reine CSS?

body > div { height: 100px; } 
 

 
.first { background: lightblue; } 
 

 
.second { 
 
    background: lightgreen; 
 
    position: relative; 
 
} 
 

 
.second div { 
 
    position: absolute; 
 
    background: pink; 
 
    width: 50%; 
 
    height: 200px; 
 
    top: 100px; 
 
}

<div class="first">The height of the block may vary greately.</div> 
 
<div class="second"> 
 
    <div>This DIV should take whole free space to the bottom of the screen.</div> 
 
</div>

UPD:

I durch Umwickeln zweiten div in zusätzliche div (Breitenposition absolute und unten: 0), um den Effekt zu erzielen und es mit transparentem Hintergrund verlassen, aber dann statisch Inhalte "dahinter" werden unbrauchbar. Hier ist an example.

Answer 1

Dieses auf Ihrem Update Geige basiert, da es nicht klar ist, was Sie erreichen wollen, aber sie erwähnt dieses Beispiel war in der Nähe, habe ich Ihren Link mit z-index oben zu sein, so ist es klickbare:

Check external Fiddle, embedded seems to break bottom

Answer 2

body > div { height: 100px; } 
 

 
.first { background: lightblue; } 
 

 
.second { 
 
    background-color: lightgreen; 
 
    top: 100px; 
 
} 
 

 
.second >div { 
 
    background: pink; 
 
    width: 50%; 
 
    height: 100%; 
 
}

<div class="first">The height of the block may vary greately.</div> 
 
<div class="second"> 
 
    <div>This DIV should take whole free space to the bottom of the screen.</div> 
 
</div>