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)

原文地址：https://www.jb51.cc/html/426581.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。