html - 将全高绝对元素定位在相对元素中

Question

请帮我解决这个问题。我们有 3 个 div block 。第一个 div 的高度设置为 100px(但在现实世界中它是动态值)。第二个 block 有固定的高度，并且有另一个 block 作为 child 。子 block 的高度应该向下延伸到屏幕底部。但是由于我们的第二个 block 是相对的，bottom:0 表示第二个 block 的底部。这种情况下的最佳做法是什么，纯 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)并使其具有透明背景来实现效果，但是“它后面”的静态内容变得不可用。这是 an example .

Answer 1

这是基于你的更新 fiddle ，因为它不是很清楚你希望实现什么，但你提到这个例子很接近，我把你的链接放在上面 z-index 所以它是可点击的:

Check external Fiddle, embedded seems to break bottom