我坚持显示一个名为“home”的 React 组件，它占据了我屏幕高度的 100%。 无论我使用 CSS 或 React 内联样式，它都不起作用。
在下面的示例中，html、body 和 #app 在 CSS 中设置为 height: 100%。对于 .home 我使用了内联样式（但无论我使用 CSS 还是内联样式都是一样的）：
问题似乎来自 <div data-reactroot data-reactid='1'> 未设置 height: 100%。
那么在 React 中显示全高组件的正确方法是什么？
欢迎任何帮助:)
【问题讨论】：
<MyComponent ...> 是用reactid 创建这个div 的。因此，您需要为其添加一个类或样式。例如<MyComponent className="full-height">
尝试使用 !important in height。这可能是因为其他一些样式影响了您的 html 正文。
{ height : 100% !important; }
您也可以在 VP 中提供值，这将设置您提到的 viee 端口像素的高度，例如height : 700vp;，但这不会是可移植的。
【讨论】：
important 表示解决方案不佳。问题在于高度在嵌套元素中的行为方式。
这几天让我很烦。最后我利用 CSS 属性选择器来解决它。
[data-reactroot]
{height: 100% !important; }
【讨论】：
position: absolute; width: 100% !important; height: 100% !important;
body{
height:100%
}
#app div{
height:100%
}
这对我有用..
【讨论】：
#app以下任何位置的所有div的高度为100%。你可能想使用#app>div，只选择#app的直接子div
html, body, #app, #app>div {
height: 100%
}
这将确保所有链都是height: 100%
【讨论】：
html 和body 的值是必要的，因为100% 将跟随明确指定维度的“最近”父级。这意味着如果html 和body 都具有未指定的height，则height: 100% 的子级无效。
你也可以这样做：
body > #root > div {
height: 100vh;
}
【讨论】：
虽然这可能不是理想的答案，但试试这个：
style={{top:'0', bottom:'0', left:'0', right:'0', position: 'absolute'}}
它保持与边框相关的大小，这不是您想要的，但会给您带来一些相同的效果。
【讨论】：
试试<div style = {{height:"100vh"}}> </div>
【讨论】：
在index.html 头部添加这个对我有用：
<style>
html, body, #app, #app>div { position: absolute; width: 100% !important; height: 100% !important; }
</style>
【讨论】：
对于使用 CRNA 的项目，我使用它
在index.css
html, body, #root {
height: 100%;
}
然后在我的 App.css 中使用它
.App {
height: 100%;
}
如果有一个例子，也可以将 App 中的 div 的高度设置为 100%-
.MainGridContainer {
display: grid;
width: 100%;
height:100%;
grid-template-columns: 1fr 3fr;
grid-template-rows: 50px auto;
}
【讨论】：
尽管在这里使用了 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 旨在更改元素相对于（自己的位置 - 相对，视口 - 固定，位置不是静态的最近的父级 - 绝对）的渲染方式。 Ans 尽管position: absolute; top: 0; right: 0; bottom: 0; left: 0; 会产生相同的外观 - 它还会促使您将父母 position 更改为 static 以外的东西 - 所以您需要维护 2 个元素。这也会导致父 div 折叠成一行（0 高度）和内部 - 全屏。这会在元素检查器中造成混淆。【讨论】：
我在我的 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>
);
}
【讨论】：
我在将侧面导航面板高度显示为 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% 的修复；我希望这可以帮助您或遇到类似问题的任何人。祝你好运！
【讨论】：
我遇到了麻烦，直到我使用检查器并意识到 react 将所有内容放在 id='root' 的 div 中，从而授予 100% 高度以及 body 和 html 对我有用。
【讨论】：
#app {
height: 100%;
min-height: 100vh;
}
始终为最小视图全高度
【讨论】：
<div style={{ height: "100vh", background: "#2d405f" }}>
<Component 1 />
<Component 2 />
</div>
创建一个带有背景颜色的全屏 div #2d405f
【讨论】：
CRA 有一个 #root div，我们将我们的 react 应用程序渲染到该 div，因此它也应该被视为父 div 并根据您的需要提供适当的高度。这个答案是基于我在类似情况下的经验，给#root 100% 的高度帮助我解决了它的一个子元素的高度问题。
这取决于您的应用程序的布局，在我的情况下，孩子无法占据给定的高度，因为#root(parent) div 没有指定的高度
【讨论】：