Div占用屏幕的总空间

Question

Like other pages, the main div is always a way in which occupies the entire screen seen by the User, and when he scroll down he can see another div: example1 , example2

No matter if you resize the screen, the main div will always occupy the total space seen by the User.

To test It I try this code below:

<div style="background:yellow;  position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; z-index:-1; float:left;">
    This is my Section!
</div>

With him I can see a large yellow background with a text occupying the entire area of my browser. Assuming I would like to add another div below this, how could I do that? Is possible with css or I will need javascript?

Answer 1

You can do it without javascript with only pure CSS.

With vh units, you can specify a margin-top on the next container like this :

#content { margin-top: 100vh;}

The advantage of this method is that it is fully responsive, no matter how you resize it (height or width).

See it here

Answer 2

If you check your div more correctly, this code:

top: 0; bottom: 0; right: 0; 

Is what causes your div to occupy the whole screen because there isn't any space between the div since you set all of them at 0.