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

前端之家收集整理的这篇文章主要介绍了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)

猜你在找的HTML相关文章