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.