100%高度div包装,100%高度儿童扩展

Question

如何获得一个100%高度的包装器div来扩展其子级的高度？这也是100%的高度.

设置如下所示:

<div id="wrapper" style="height:100%">
  <div class="child" style="height:100%">div1</div>
  <div class="child" style="height:100%">div2</div>
</div>

但包装纸不会扩展到200%的高度.我已经尝试过制作包装min-height:100%;但是孩子们没有继承全高,只有自己内容的高度.

https://jsfiddle.net/on78pof8/

(浅绿色的盒子,不要扩大)

Answer 1

在子 div 上设置视口单位的高度

.child {
  height:100vh;
}

演示（带有视口单位）

（注意：OP 实际上对包装上的背景图像感兴趣，而不是纯水绿色）

.child {
  height:100vh;
}

html,
body {
  height: 100%;
}
#wrapper {
  background: aqua;
}
.child {
  height: 100vh;
}

如果你不想使用视口单位（顺便说一句 - 正如@CoadToad在评论中指出的那样 - 有很好的支持） - 那么我认为你必须使用javascript。

演示（使用 JavaScript）