如何让 Angular 组件占据屏幕的全高

Question

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

作为参考，我试图模仿http://andrewborstein.github.io/portfolio/ 之类的东西

Answer 1

使用:host选择器

hello.component.css

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

堆叠闪电战示例

Answer 2

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

height: 100vh;

或者创建一个 css 类并将其添加到元素：

.full-height {
    height: 100vh;
}