无法让我的React应用填满屏幕

Question

无论我尝试了什么，都无法在我的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的{​​{1}}和100vh/vw。

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

Answer 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的特定类。