IamGuest IamGuest - 11 months ago 54
CSS Question

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

I want to make a div with a

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
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 Source

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>