How to get Angular component to take full height of screen

问题

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/

回答1:

Just add style to your element:

height: 100vh;

Or create a css class and add it to element:

.full-height {
    height: 100vh;
}

回答2:

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

来源：https://stackoverflow.com/questions/51332847/how-to-get-angular-component-to-take-full-height-of-screen