css - 如何使用窗口的实际大小使 Angular 组件全屏显示

Question

我正在使用 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;
}

Answer 1

在 css 中，您会发现两个非常适合您的单元:

vh for viewport-height -> 作为设备屏幕全高的百分比

vw for viewport-width-> 占设备屏幕全宽的百分比

因此，如果您想要屏幕的全高 100%，您可以使用 height: 100vh 实现它:

body {
  margin: 0;
  padding: 0;
}

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

<div></div>

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