Css 反应-组件全屏（高度100%）

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

在下面的示例中，html、body和#app在CSS中设置为高度：100%。对于.home我使用了内联样式（但是我使用的CSS或内联样式都是一样的）： 问题似乎来自未设置高度的

：100%

如果我用Chrome开发者工具攻击它，那就是工作：

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

---

欢迎提供任何帮助：）

尝试使用！在高度上很重要。这可能是因为其他一些样式影响了html主体

{ height : 100% !important; }

---

您还可以在VP中给出值，该值将设置您提到的viee端口像素的高度，如

height:700vp但这不能随身携带。
它让我烦了好几天。最后，我使用CSS属性选择器来解决这个问题

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

这对我有用

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

这将确保所有链条的高度为100%

您还可以执行以下操作：

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

---

虽然这可能不是理想的答案，但请尝试以下方法：

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

---

它将大小附加到边框上，这不是您想要的，但会给您一些相同的效果。

尝试

将此添加到

索引中。html

头对我来说很有用：

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

html，body，#app，#app>div{位置：绝对；宽度：100%！重要；高度：100%！重要；}

对于使用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;
}

尽管使用了React here-elements，但布局完全是html/css特性

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

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


html{
身高：100%；
}
身体{
身高：100%；
}
除根{
高度：100%；/*删除此行以查看div.app不再是100%高度*/
背景色：靛蓝；
填充：0 30px；
}
div.app{
身高：100%；
背景颜色：玉米丝；
}

如果我的父母是我，我将是100%的身高
我在app.css中使用了一个css类来管理它

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

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

render（）{
返回（{content}）；
}

或内联

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

render（）{
返回(
{content}
);
}
我也遇到同样的问题，将侧导航面板的高度显示为100%

我修复它的步骤是：

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

在sidePanel.css中（这给了我一些问题）：

。侧面板{
身高：100%；
位置：已修复；在使用inspector之前，我遇到了一些问题，我意识到react将所有内容都放在一个div中，id='root'表示100%的高度以及body和html对我有效

#app {
  height: 100%;
  min-height: 100vh;
}

始终为最小全高视图

<div style={{ height: "100vh", background: "#2d405f" }}>
   <Component 1 />
   <Component 2 />
</div>


创建一个背景色为全屏的div#2d405f
你的组件
就是用reactid创建这个div的。因此你需要向它添加一个类或样式。例如
非常感谢你说的对，我刚刚忘记了一个上面的组件..！应该接受这个答案。当然要添加：
位置：绝对；宽度：100%！重要；高度：100%！重要；
此操作有效，但可能会导致其他组件出现问题。需要更“正确”的选项这样做的方式。您在哪里添加的？虽然这段代码可能会回答这个问题，但提供关于如何和/或为什么它解决问题的额外信息将提高答案的长期价值。提到为什么这个答案比其他答案更合适也没有坏处。@Dev iL与其告诉应该做什么，不如做什么应该这样做。设置
html
和
body
的值是必要的，因为
100%
将跟随“最近的”明确指定维度的父级。这意味着如果
html
和
body
都有未指定的
height
，则
height:100%
的子级无效。应该将其添加到哪个css文件？您应该将其添加到index.css，也不要忘记更改“app”名称。这将使
#app
下方的所有div都具有100%的高度。您可能希望使用
#app>div
，只选择
#app
的直接子div谢谢。在我的情况下，我错过了通过#rootUsing
的高度。在大多数情况下，使用
important
是一个解决方案不佳的指标。问题在于高度如何嵌套元素中有。不应首选！重要。我使用此解决方案是因为它不会影响父元素（html、正文等）。有什么缺点吗？这实际上很有用！我不知道您必须在每个重要元素中设置100%。谢谢！最小高度将覆盖高度
.html {
   height: 100%;
}
.body {
   height:100%;
}

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

#app {
  height: 100%;
  min-height: 100vh;
}

<div style={{ height: "100vh", background: "#2d405f" }}>
   <Component 1 />
   <Component 2 />
</div>