Div Gesamtfläche des Bildschirms

Question

Wie andere Seiten zu besetzen, die wichtigsten div sind immer eine Art und Weise, in der den gesamten Bildschirm vom Benutzer gesehen einnimmt, und wenn er, er kann ein anderes div nach unten scrollen sehen: example1, example2

Unabhängig davon, ob Sie die Größe des Bildschirms ändern, belegt das Haupt-Div immer den gesamten vom Benutzer gesehenen Platz.

Es Um zu testen, ich versuche, diesen Code unten:

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

Mit ihm, dass ich den gesamten Bereich von meinem Browser einen großen gelben Hintergrund mit einem Text sehen zu besetzen. Angenommen, ich würde ein weiteres Div darunter hinzufügen, wie könnte ich das tun? Ist das mit CSS möglich oder benötige ich Javascript?

Answer 1

Wenn Sie Ihren div mehr richtig, diesen Code überprüfen:

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

Ist das, was Ihr div verursacht den ganzen Bildschirm einnehmen, weil es keinen Raum zwischen dem div ist, da Sie alle auf 0 gesetzt

Answer 2

Sie können es ohne Javascript mit nur reinem CSS tun.

Mit vh Einheiten können Sie eine margin-top auf den nächsten Behälter wie folgt angeben:

#content { margin-top: 100vh;} 

Der Vorteil dieser Methode ist, dass es voll reagiert, egal, wie Sie es die Größe (Höhe oder Breite).

See it here