如何使Angular组件占据整个屏幕高度

Question

我正在将一个有角度的组件嵌套在另一个组件中，该组件使用该组件的css文件中的height:100%;占据了整个屏幕。我试图对它们进行分层，并希望每个组件占据整个屏幕高度，但是height:100%无效。

作为参考，我试图模仿类似http://andrewborstein.github.io/portfolio/

Answer 1

只需为您的元素添加样式：

height: 100vh;

或创建一个CSS类，并将其添加到元素中：

.full-height {
    height: 100vh;
}

Answer 2

使用:host选择器

hello.component.css

:host{
  background: #4285f4;
  color:#fff;
  position: fixed;
  top:0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

stackblitz example