为什么背景颜色在 Angular 中无法正确显示答案

【问题标题】：Why background color is not displaying properly in Angular为什么背景颜色在 Angular 中无法正确显示
【发布时间】：2021-01-10 11:43:07
【问题描述】：

我刚开始是 Angular 的新手。我已经构建了这个小角度应用程序，当我编辑 style.css 文件并向 body 标记添加背景颜色属性时，只有我的表单周围的部分被着色，而不是整个页面（请参阅图像以更好地理解） .有人可以向我解释为什么吗？任何解释将不胜感激。这是 style.css 文件中的代码 sn-p

/* You can add global styles to this file, and also import other style files */
@import "bulma/css/bulma.css";
body {
  background-color: burlywood;
}

.passbox {
  margin-top: 5%;
}

enter image description here

【问题讨论】：

尝试将背景颜色添加到html 和body。
您的表单很可能会用自己的样式覆盖正文的background-color。
我们需要更多代码

标签： css angular

【解决方案1】：

您会注意到，经过检查，身体实际上并没有填满整个屏幕。所以，你需要做的就是找到一种方法让它（body）充满。

根据this answer，加height: 100vh;就可以了。
根据this link，加background-size: cover;就可以修复了

虽然我自己没有完整的答案，但我希望通过将您引向正确的方向，您将能够优化您的搜索并找到您正在寻找的内容:-)

祝你好运！

【讨论】：

谢谢，我会试试的

【解决方案2】：

因为您的body 的高度在该点停止（因为没有更多内容），因此正文将不适合整个屏幕，您可以使用min-height: 100vh 代替<body>

/* You can add global styles to this file, and also import other style files */
@import "bulma/css/bulma.css";

body {
  background-color: burlywood;
  min-height: 100vh;
  margin: 0;
}

<body>

</body>

【讨论】：

谢谢，我会试试的