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

Question

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

参考链接：http://andrewborstein.github.io/portfolio/

- Jeff

---

你创建了一个很棒的网站。你使用了哪些技术？ - omkar

Answer 1

使用 :host 选择器

hello.component.css

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

stackblitz例子

- Muhammed Albarmavi

Answer 2

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

height: 100vh;

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

.full-height {
    height: 100vh;
}

- Denis.E