CODEWITHSUNDEEP
javascripthtmlcss
Lacrifilm
Lacrifilm

Reputation: 283

Div occupying total space of the screen

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?

Upvotes: 0

Views: 44

Answers (2)

Nutshell
Nutshell

Reputation: 8537

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

Upvotes: 1

Emily Chiu
Emily Chiu

Reputation: 122

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.

Upvotes: 0

Related Questions