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>

UPD：

我可以通过将第二个div包装到另外的div（宽度位置绝对和底部：0）并保留透明背景来实现效果，但静态内容“在它后面”变得无法使用。这是an example。

Answer 1

这是基于您的更新小提琴，因为它并不清楚您希望实现的目标，但您提到此示例已接近，我已将您的链接置于z-index之上，因此它＆＃39 ;可点击：

Check external Fiddle, embedded seems to break bottom

Answer 2

＆＃13;

body > div { height: 100px; }

.first { background: lightblue; }

.second {
  background-color: lightgreen;
  top: 100px;
}

.second >div {
  background: pink;
  width: 50%;
  height: 100%; 
}

＆＃13;

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

＆＃13;

将全高度绝对元素定位在相对一个

2 个答案: