How to make angular components full screen with the actual size of the windows

Question

I am working with angular and in my app.component.html i have some component like so :

<app-selector1></app-selector1>
<app-selector2></app-selector2>
...

I am wondering how I could make my component full screen with css (100%width & height of the actual window size) With all my try I always still have a little space something like a margin/padding but the inspector told me that they were at 0 each.

I tried some things and this one:

body div {
  position: relative;
  width: inherit;
  height: 100%;
  left: 0;
}

Answer 1

In css you will find two units perfect for what you want:

vh for viewport-height -> as a percentage of the full height of your device screen

vw for viewport-width-> as a percentage of the full width of your device screen

So if you want the full height of your screen so 100% of it you can achieve it using height: 100vh:

body {
  margin: 0;
  padding: 0;
}

body div {
  width: 100vw;
  height: 100vh;
  background: red;
}

<div></div>

If you wanted only 60% of the height just use height: 60vh and so on.

Answer 2

You can use the vh as unit for height and vw for width.

body div {
  height: 100vh;
  width: 100vw;
}

Check it here: https://www.w3schools.com/css/css_rwd_viewport.asp

Answer 3

I have tried the 100vh and 100wh, but the scroll bar still existed both vertically and horizontally. What worked for me was setting the height to 98vh and the width to 99vw, and the element covered the whole screen with no scroll bars. It's because all the browsers have this auto margin set for the root element of your page, so 100vh and 100vw might not work. try the interval between 95-99 vh and vw and keep checking until your scroll bars disappear.