如何让 Angular 组件占据整个屏幕高度答案

【问题标题】：How to get Angular component to take full height of screen如何让 Angular 组件占据整个屏幕高度
【发布时间】：2018-12-22 06:58:48
【问题描述】：

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

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

【问题讨论】：

您创建了很棒的网站。您使用了哪些技术？

标签： javascript css angular user-interface frontend

【解决方案1】：

使用:host选择器

hello.component.css

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

stackblitz example

【讨论】：

【解决方案2】：

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

height: 100vh;

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

.full-height {
    height: 100vh;
}

【讨论】：