Positioning full-height absolute element inside relative one - html

Question

Please help me to solve the quest. We have 3 div blocks. Height of the first div set to 100px (but in real world it's dynamic value). Second block has fixed height, and has another block as a child. The child block should have height stretched down to the bottom of the screen. But since our second block is relative, bottom:0 will mean bottom of the second block. What is the best practice for such cases, pure CSS please?
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 can achieve the effect by wrapping second div into additional div (width position absolute and bottom: 0) and leave it with transparent background, but then static content "behind it" become unusable. Here is an example.

Answer 1

This is based on your update fiddle, since it's not that clear what you wish to achieve but you mentioned this example was close, I made your link to be above with z-index so it's clickable:
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>