ReactJS/CSS 利用元素的整页

Question

我不太擅长 CSS，所以我正在学习其中的很多内容。 我目前的问题是我试图让我的反应组件利用浏览器窗口的整个高度。 目前我已经决定使用Display: 'grid' 和gridTemplateRows: '1fr'，但效果很奇怪。

正如您在上面看到的，1FR 似乎只使用了一个设置大小，而不是整个页面大小。 在登录后的链条中，我还将拥有需要利用页面大小的数据网格，因此它们可以根据需要调整自己的大小......但我遇到的当前问题是容器不是页面，但只有里面元素的大小。

我尝试在不同的部分使用height:'100%'，但问题仍然存在，因为似乎有些东西将容器的大小设置为不是页面大小，但我从未设置过（如您所见在下面的检查器中）任何具有硬编码高度大小的东西。

更新编辑：我创建了 Index.css 供使用，其中包含一组简单的：

html, body {height: 100%;}
#ReactRoot {min-height: 100vh;}

我尝试了两件事：

1. 在公共的index.html和同一个公共文件夹的index.css中，我尝试让它使用CSS，但没有效果。在这种情况下不知道哪里错了。

2. 在 index.js 中，我导入了 index.css（与上面相同，但它现在在我的 SRC 文件夹中），通过

import "./index.css";

这有这个结果。顶级 div ReactRoot 是全屏的……里面的所有内容，即使在模块内的 inline-css 中设置了 100% 的高度，也不会达到 100% 的高度。

然而，往下看，一切似乎都没有遵守 100% 的规则。将模块中的内联 CSS 设置为 height:"100%" 没有任何效果

Answer 1

将min-height 设置为 100% 将实现此目标。

html {
  height: 100%;
}
body {
  min-height: 100vh;
}