将每个组件的根包装器设置为全身高度

Posted 2023-02-23

【中文标题】将每个组件的根包装器设置为全身高度

【英文标题】：Set root wrapper to full body height for every component

【发布时间】：2021-01-03 07:20:02

【问题描述】：

我正在做一个 React 项目来创建一个简单的网站。我有 10 到 15 个组件，它们都有不同的 CSS 样式表。现在我想要的是，无论用户登陆哪个组件，我都希望将 index.html 的根包装器保持为 100vh。但我似乎无法弄清楚我应该在哪个样式表上添加 root 样式。如果您有任何想法，请分享。

提前谢谢你。继续努力

【参考方案1】：

与您的 React 项目中的 index.html 文件一样，可能有一个 App.css 文件，您可以在其中将根的，即 body 或 html min-height 设置为 100vh。在 App.css 中，您可以包含

html, bodymin-height: 100vh;

【讨论】：

我直接在index.html本身加上style标签可以吗。

是的，应该也可以添加 style="min-height: 100vh;"但前提是您准备好在您网站的所有模块和组件中普遍接受这种风格@HimanshuTariyal，但也要尝试给它body标签