How to get Angular component to take full height of screen

Question

I'm nesting an angular component inside another one that is taking up the whole screen using height:100%; in the component's css file. I'm attempting to layer them and want each component to take up the whole screen height, but height:100% has no effect.

For reference I'm attempting to emulate something like http://andrewborstein.github.io/portfolio/

Answer 1

use :host selector

hello.component.css

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

stackblitz example

Answer 2

Just add style to your element:

height: 100vh;

Or create a css class and add it to element:

.full-height {
    height: 100vh;
}