将全高绝对元素定位在相对元素内

Question

请帮我解决任务。我们有 3 个div 块。第一个div 的高度设置为 100px（但在现实世界中它是动态值）。第二个块具有固定的高度，并且作为子块具有另一个块。子块的高度应向下拉伸到屏幕底部。但是由于我们的第二个块是相对的，底部：0将表示第二个块的底部。在这种情况下，请问纯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>

上级：

我可以通过将第二个div 包装成额外的div（宽度位置绝对和底部：0）并保留透明背景来实现效果，但随后"它后面"的静态内容变得不可用。下面是一个示例。

Answer 1

这是

基于您的更新小提琴，因为不清楚您希望实现什么，但您提到此示例很接近，我将您的链接与z-index一起放在上面，因此它是可点击的：

检查外部小提琴，嵌入似乎破底

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>