无法让我的 React 应用程序填满屏幕答案

【问题标题】：Can't get my React app to fill the screen无法让我的 React 应用程序填满屏幕
【发布时间】：2019-06-09 23:55:56
【问题描述】：

无论我尝试了什么，我都无法在我的 react 应用程序中获得 #root div 来填满整个屏幕。它将在 #root 标记的上方和左侧留下很大一部分空间，所有已编译的反应代码都将在此处显示。

这里是回购的链接，我想问题出在./public/index.html 文件或./src/app.js 或./src/index.js。

https://github.com/dmshakur/fitness_plan

我尝试将css样式添加到html和body标签，以及使用create-react-app时默认的#root标签和.app类。我尝试在两者上同时使用 height 和 width 以及 100vh/vw 和 100%。

我想自己解决这个问题，但它不起作用而且耗费太多时间。

【问题讨论】：

不是因为body上的padding吗？

标签： css reactjs redux materialize

【解决方案1】：

罪魁祸首是 body 标签。上面有 5em 的填充。

罪魁祸首文件是src/pages/Welcome/Welcome.css 你有

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  font-size: 62.5%;
  background: #dadada;
  font-family: "Open Sans", sans-serif;
  line-height: 2;
  padding: 5em;
}

删除此填充可解决问题。

body {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
      font-size: 62.5%;
      background: #dadada;
      font-family: "Open Sans", sans-serif;
      line-height: 2;
}

我会建议你直接删除 body 标签上的样式，并创建一个可以添加到 div 的特定类。

【讨论】：