Question

一个简单的问题，可能会帮助我提出一个更复杂的问题，在此不再赘述。

您知道为什么红色不能占据页面的所有背景吗？

当然，在我的问题中，我不想修改文件“ index.html”和“ style.css”

提前谢谢您，祝你愉快

Answer 1

您的background-color: red仅适用于您的div，默认情况下，该div的高度等于其内元素的总高度。为了代替整个页面，您只需要将高度设置为100vh

.back {
  height: 100vh;
  background-color: red;
}

Answer 2

父块元素（在这种情况下为<body>）的高度不为100％。默认情况下，它还有一定的余量。主体元素的块父级也未设置高度。这是<html>标记。如果不想编辑全局CSS文件，可以用两种方法解决此问题：

将此添加到您的组件css中，这很丑陋，很多人对此不屑一顾

::ng-deep body,
::ng-deep html {
  height:100%;
  margin: 0;
}

.back {
  height: 100%;
}

另一种方法是使位置绝对。之所以起作用，是因为该元素的相对父元素是 ~~<html>元素~~视口：

.back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}