我正在尝试创建一个针对移动设备优化的 React 应用程序，并且正在使用 flexbox 进行大部分布局。我无法强制我的应用程序的主容器自动扩展到完整的设备高度。
我可以应用哪些规则，特别是我的 html 容器<div id="react-app"></div>和我的主应用程序容器，<App></App>以便它们始终伸展到全屏高度，即使他们的孩子不会强迫他们这样做？
如何让 React Flexbox 拉伸到全屏高度
IT技术
reactjs
flexbox
2021-05-06 04:51:23
3个回答
您可以使用
height:100vh
对于您的 App 组件，但它在 iOS Safari 上看起来并不完美。你也可以设置
html, body, #reactapp, .App {
height: 100%;
}
.App {
display: flex;
}
patlarpan 在这里的回答似乎是最简洁的解决方案：
您可以通过使用“vh”单位来实现这一点，它比使用百分比更有效，因为如果您希望孩子的身高为 100%，则无需将每个父身高都设置为 100%。
.columnContainer { display: flex; height: calc(100vh - 60px); }这是从视口高度中排除 60 像素应用栏高度的示例。
我用这个替换了 patlarpan 示例中的高度线，因为我没有应用栏：
height: 100vh;
root > [data-reactroot] { height: 100% } 在你的 CSS 中应该可以工作。
或者只是标签本身：
[数据react根] { ... }