如何更改子组件的视口设置(将子组件的容器设置为100vw/100vh )？

Question

在我的项目中，我将react-static存储库与react repo链接(使用yarn链接)。

"react": "^16.13.1"
"react-static": "^6.0.18"

从react-static存储库中，我导入了react repo中使用的多个组件。我希望能够在react-static中使用vw/vh单元，这样它们将以我下面描述的方式显示在react项目中。

问题是如何使div成为儿童视区的100%宽度和100%高度。我需要这样做：

<div className="wrapper">
<div className="inner"></div>
</div>

内部div (从react-static导入)需要有width: 100vw; height: 100vh;。例如，如果我为width: 400px; height: 200px; (窗口大小为1920x1080)设置包装器大小(react容器)，我希望内部容器的视区改变它与包装器大小匹配的方式-因此它将具有width: 400px; height: 400px;，但行为方式就像包装器是它的整个窗口一样。

到目前为止，我找到的唯一解决方案是计算内部容器中元素的大小。有什么建议吗？

Answer 1

您应该能够将该子对象的高度设置为百分比，它将为您提供其父div的百分比。关于高度的百分比有一些奇怪的事情-例如，父div需要显式地声明高度(高度的百分比:auto将始终为0)。阅读这个post上的第二个答案，它会比我更好地解释它。