Angular2 set height to full screen

Question

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

Answer 1

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.

Answer 2

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/