问题描述
在我的项目中，我将 react-static 存储库与 react repo 链接（使用纱线链接）。
"react": "^16.13.1"
"react-static": "^6.0.18"
从 react-static 存储库中，我正在导入在 react 存储库中使用的多个组件。我希望能够在 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）设置包装器尺寸（反应容器），我希望内部容器的视口改变它匹配包装器尺寸的方式 - 所以它会有 width: 400px; height: 400px;但会表现得像包装器是它的整个窗口。
到目前为止我找到的唯一解决方案是计算内部容器中元素的大小。 有什么建议吗？
解决方法
您应该能够将子项设置为百分比高度，它会为您提供其父 div 的百分比。关于高度的百分比有一些奇怪的事情 - 例如，父 div 需要明确声明高度（height:auto 的百分比将始终为 0）。阅读关于此 post 的第二个答案，它会比我更好地解释它。