React - 组件全屏（高度为 100%）

IT技术 css reactjs html
2021-04-26 00:33:07

我一直坚持显示一个名为“home”的 React 组件，它占据了我屏幕高度的 100%。无论我使用 CSS 还是 React 内联样式，它都不起作用。

在下面的示例中，html、body和#app在 CSS 中设置为 height: 100% 。对于.home，我使用了内联样式（但无论我使用 CSS 还是内联样式都是一样的）： 在此处输入图片说明 问题似乎来自<div data-reactroot data-reactid='1'>未设置高度：100%。

如果我用 Chrome 开发者工具破解它，它的工作： 在此处输入图片说明

那么在 React 中显示全高组件的正确方法是什么？

欢迎任何帮助:)

4个回答
html, body, #app, #app>div {
  height: 100%
}

这将确保所有链 height: 100%

你也可以这样做：

body > #root > div {
  height: 100vh;
}

尝试 <div style = {{height:"100vh"}}> </div>

这让我烦了好几天。最后我使用 CSS 属性选择器来解决它。

[data-reactroot] 
        {height: 100% !important; }
其它你可能感兴趣的问题
上一篇为什么对线性导轨如此兴奋？ 下一篇制作推动/咬合在一起的零件的技巧