React - 组件全屏（高度100％）

Question

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

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

如果我使用Chrome开发人员工具攻击它，它的工作原理是：

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

欢迎任何帮助:)

Answer 1

html, body, #app, #app>div {
  height: 100%
}

这将确保所有链都是height: 100%

Answer 2

对于使用CRNA的项目，我在index.css中使用它

html, body, #root {
  height: 100%;
}

然后在我的App.css中使用它

.App {
  height: 100%;
}

并且如果有一个例如 - 如果有一个div，则将高度设置为100％

.MainGridContainer {
  display: grid;
  width: 100%;
  height:100%;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 50px auto;
}

Answer 3

尽管在这里使用了React - 元素布局完全是html / css功能。

问题的根本原因在于css中的height属性如何工作。当您使用高度的相对值（以％为单位）时 - 这意味着将相对于其父级设置高度。

因此，如果你有像html > body > div#root > div.app这样的结构 - 要使div.app 100％高度，它的所有祖先应该有100％的高度。你可以玩下一个例子：

html {
  height: 100%;
}

body {
  height: 100%;
}

div#root {
  height: 100%; /* remove this line to see div.app is no more 100% height */
  background-color: indigo;
  padding: 0 30px;
}

div.app {
  height: 100%;
  background-color: cornsilk;
}

<div id="root">
  <div class="app"> I will be 100% height if my parents are </div>
</div>

几个论点：

• 使用!important - 尽管有一段时间这个功能在~95％的情况下很有用，但它表明html / css的结构很差。而且，这不是当前问题的解决方案。
• 为什么不position: absolute。属性positon旨在改变元素的呈现方式（自己的位置 - 相对，视口 - 固定，最近的父级，其位置不是静态的 - 绝对的）。尽管position: absolute; top: 0; right: 0; bottom: 0; left: 0;的答案会产生相同的外观 - 它也会促使你将父母position改为不是static的东西 - 所以你需要保持2个元素。这也导致父div折叠成一行（0-高度）和内 - 全屏幕。这使元素检查员感到困惑。

Answer 4

尝试使用！重要的高度。这可能是因为影响你的html身体的其他一些风格。

{ height : 100% !important; }

你也可以在VP中给出值，它会将高度设置为你提到的像height : 700vp;那样的端口像素，但这不是便携式的。

Answer 5

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

[data-reactroot] 
        {height: 100% !important; }

Answer 6

你也可以这样做：

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

Answer 7

虽然这可能不是理想的答案，但试试这个：

style={{top:'0', bottom:'0', left:'0', right:'0', position: 'absolute'}}

它保持大小附加到边框不是你想要的，但给你一些相同的效果。

Answer 8

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

Answer 9

body{
 height:100%
}

#app div{
height:100%
}

这对我有用..

Answer 10

我在app.css中使用css类来管理它

.fill-window {
    height: 100%;
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
}

将它应用于render（）方法中的根元素

render() {
   return ( <div className="fill-window">{content}</div> );
}

或者内联

render() {
   return (
      <div style={{ height: '100%', position: 'absolute', left: '0px', width: '100%', overflow: 'hidden'}}>
          {content}
      </div>
   );
}

Answer 11

我有同样的问题，显示我的侧导航面板高度为100％。

我修复它的步骤是：

在index.css文件中------

.html {
height: 100%;
}
.body {
height:100%;
}

在侧面Panel.css（这给了我问题）：

.side-panel {
height: 100%;
position: fixed; <--- this is what made the difference and scaled to 100% correctly
}

其他属性是为了清晰起见，但我认为问题在于在嵌套容器中将高度缩放到100％，就像在嵌套容器中尝试缩放高度一样。父类高度需要应用100％。 - 我很好奇的是为什么修复：位置纠正了规模而没有它就失败了;这是我最终会通过一些练习来学习的东西。

我一直在做反应一个星期，我是网络开发的新手，但我想分享一个修复，我发现缩放高度为100％;我希望这可以帮助您或任何有类似问题的人。祝好运！

Answer 12

在index.html头部添加这个为我工作：

<style>
    html, body, #app, #app>div { position: absolute; width: 100% !important; height: 100% !important; }
</style>