Make a DIV cover entire page, but WITHOUT using CSS position [duplicate]

Question

I want to make a div with a background-color of red to cover my entire page, but I do not want to use CSS position: absolute. Here is my example with CSS position:

<div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"></div>

CSS position works for the most part, but then I am unable to create more than one of these divs (they overlap or cancel each other out because of top: 0 and left: 0). When you scroll down, I want you to see additional divs.

It would really help if there was a pure CSS solution, but JavaScript and HTML are open to me as well. JUST NO JQUERY.

Answer 1

What about using viewport height and viewport width?

I've created an example in this JSFiddle.

body, html {
    margin: 0;
    padding: 0;
}

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

.one {
    background-color: blue;
}

.two {
    background-color: green;
}

.three {
    background-color: yellow;
}

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

Answer 2

If you want to make div to occupy entire space use vw and vh

because making div alone height:100% and width:100% would not do it

without using viewport units

check this snippet

div{
 width: 100%;
  height:100%;
  background:red;
   
}

html,body{
  height:100%;
   width:100%;
  }

<div ></div>

but making html and body to have height and width is a bad idea so to skip it use view port units

check this with viewport unist

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

<div></div>

Hope it helps