如何使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;
        }

Answer 2

root＆gt; CSS中的[data-reactroot] {height：100％}应该可以正常工作。

或者只是标签本身：

[data-reactroot] {...}

Answer 3

patelarpan's answer here似乎是最简洁的解决方案：

您可以使用“ vh”单位来实现此目的，它比使用百分比更有效，因为如果您希望孩子的身高为100％，则无需将每个父级的身高设置为100％。

.columnContainer { 
   display: flex; 
   height: calc(100vh - 60px);
}

以下是60px应用栏高度从视口高度中排除的示例。

由于没有应用栏，我用了patelarpan的示例替换了身高线：

height: 100vh;