Q:

Angular2 set height to full screen

I would like to set a div to full screen in angular2 template
I have tried this
Im my html template
<div class="auth-container">

</div>

In trhe css
.auth-container{
  height: 100%; //also tried with min-height
  background-image: url("assets/images/backgroundimage.jpg");
 -webkit-background-size: cover;
-moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

}
THe image stretches to full screen but its cut off by the page height as shown in the screen shot below
Setting the height manually like
height:550px;

Stretches to full screen but its not responsive in different screen sizes
What do i need to set to extend the height to maximum

A:

Use may use vh (viewport-height) and vw (viewport-width) length units to stretch to full available screen size:
.auth-container {
  height: 100vh;
  width: 100vw;
}

edit - Explanation: By using the css length unit % on height, you specify the height of the div relative to its parents height.  Therefore, if the immediate parent (e.g.) has a smaller height than the viewport, it will not be enough.  Only if you'd set all ancestor elements (html, body, ..., .auth-container) to height 100%, it would work this way. 

A:

You could utilize the vh and vw units, so, 
height: 100vh 
width: 100vw

Here's some good follow up reading that goes through the pros and cons of this method https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

