如何使角度组件与窗口的实际尺寸全屏显示

我正在使用 Angular，在我的 app.component.html 中我有一些像这样的组件：

<app-selector1></app-selector1>
<app-selector2></app-selector2>
...

我想知道如何使用 css 使我的组件全屏显示（实际窗口大小的 100% 宽度和高度） 经过我所有的尝试，我总是仍然有一点空间，比如边距/填充，但检查员告诉我，它们都是 0。

我尝试了一些事情，其中​​之一是：

body div {
  position: relative;
  width: inherit;
  height: 100%;
  left: 0;
}

In css您会发现两个单元非常适合您的需求：

vh对于 viewport-height -> 作为设备屏幕总高度的百分比

vw对于 viewport-width-> 作为设备屏幕全宽度的百分比

因此，如果您想要屏幕的完整高度，即 100%，您可以使用以下方法来实现height: 100vh:

body {
  margin: 0;
  padding: 0;
}

body div {
  width: 100vw;
  height: 100vh;
  background: red;
}

<div></div>

如果你只想要 60% 的高度，只需使用height: 60vh等等。