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

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

视口高度 -> 占设备屏幕总高度的百分比

vw

表示视口宽度 -> 占设备屏幕全宽度的百分比

因此，如果您想要屏幕的全高，即 100%，您可以使用

height: 100vh

:

来实现

body {
  margin: 0;
  padding: 0;
}

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

<div></div>

如果您只想要 60% 的高度，只需使用

height: 60vh

等等。

Answer 2

您可以使用 vh 作为高度单位，使用 vw 作为宽度单位。

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

Answer 3

我尝试了100vh和100wh，但滚动条仍然存在垂直和水平。对我有用的是将高度设置为 98vh，宽度设置为 98vw，并且该元素覆盖整个屏幕，没有滚动条。尝试 95-99 vh 和 vw 之间的间隔，直到滚动条消失。