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

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

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

Answer 3

你也可以这样做:

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

Answer 4

我用 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 5

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

Answer 6

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

始终全视高度 min

Answer 7

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

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

所以，如果你有一个像一个结构html > body > div#root > div.app-使div.app100％的高度及其所有祖先应该有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旨在更改元素相对于（自己的位置 - 相对，视口 - 固定，位置不是静态的最近父级 - 绝对）的呈现方式。Ans 尽管position: absolute; top: 0; right: 0; bottom: 0; left: 0;会导致相同的外观 - 它也会促使您将父项更改position为不是static- 因此您需要维护 2 个元素。这也会导致父 div 折叠成一行（0 高度）和内部 - 全屏。这在元素检查器中造成了混乱。

Answer 8

body{
  height:100%
}

#app div{
  height:100%
}

这对我有用..

Answer 9

虽然这可能不是理想的答案,但试试这个:

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

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

Answer 10

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

创建一个全屏的div，背景颜色为#2d405f

Answer 11

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

我修复它的步骤是：

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

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

在 sidePanel.css （这给我带来了问题）：

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

为了清楚起见，其他属性已被删除，但我认为问题在于将嵌套容器中的高度缩放到 100%，就像您尝试在嵌套容器中缩放高度一样。父类高度将需要应用 100%。- 我很好奇的是为什么固定：位置校正比例，没有它就会失败；这是我最终会通过更多练习学到的东西。

我已经和 react 一起工作了一个星期，我是 Web 开发的新手，但我想分享一个我发现的将高度缩放到 100% 的修复程序；我希望这可以帮助您或任何有类似问题的人。祝你好运！

Answer 12

尝试使用 !important in height。这可能是因为其他一些样式影响了您的 html 正文。

{ height : 100% !important; }

您也可以在 VP 中给出值，它将设置您提到的 viee 端口像素的高度height : 700vp;，但这不会是可移植的。