如何让 React Flexbox 拉伸到全屏高度

Question

我正在尝试创建一个针对移动设备优化的 React 应用程序，并且正在使用 flexbox 进行大部分布局。我无法强制我的应用程序的主容器自动扩展到完整的设备高度。

我可以应用哪些规则，特别是我的 html 容器<div id="react-app"></div>和我的主应用程序容器，<App></App>以便它们始终伸展到全屏高度，即使他们的孩子不会强迫他们这样做？

Answer 1

您可以使用

height:100vh

对于您的 App 组件，但它在 iOS Safari 上看起来并不完美。你也可以设置

        html, body, #reactapp, .App {
          height: 100%;
        }
       .App {
         display: flex;
        }