html – 100％高度div包装器扩展,100％高度儿童

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

设置如下所示：

但包装纸不会扩展到200％的高度.我试过制作包装器最小高度：100％;但后来孩子们没有继承全高,只有自己内容的高度.

https://jsfiddle.net/on78pof8/

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

最佳答案

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

.child {
  height:100vh;
}

Demo (with viewport units)

(注意：OP实际上对包装纸上的背景图像感兴趣而不是固体浅绿色)

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

如果你不想使用视口单元(顺便说一下 – 正如@CoadToad在评论中指出的那样 – 有very good support) – 那么我认为你将不得不使用javascript.

Demo (with javascript)