Wie kann ich dafür sorgen, dass ein Div-Element immer den gesamten Bildschirm einnimmt?-CSS-Tutorial-php.cn

Wie kann ich dafür sorgen, dass ein Div-Element immer den gesamten Bildschirm einnimmt?

Mary-Kate Olsen

Freigeben： 2024-12-09 00:20:10

Original

971 Leute haben es durchsucht

How to Make a Div Element Always Occupy the Full Screen?

So führen Sie ein
Vollbild unabhängig von der Inhaltsgröße

Problem:

Ist es möglich, ein

zu erstellen? Element den gesamten Bildschirm einnimmt, unabhängig vom darin enthaltenen Inhalt?

Lösung:

Der folgende CSS-Ansatz erzielt durchweg den gewünschten Effekt:

<head>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }

    #wrapper {
      min-height: 100%; /* This ensures the `#wrapper` is at least as tall as the viewport */
    }
  </style>
</head>

<body>
  <div>

Nach dem Login kopieren

Diese Lösung ist sowohl unkompliziert als auch browserübergreifend kompatibel. Dabei werden vier CSS-Attribute festgelegt:

height: 100 % für den und Elemente stellen sicher, dass sie den gesamten Bildschirm vertikal ausfüllen.
Rand: 0 für den und Elemente entfernt alle Standardränder oder -abstände, die den Vollbildeffekt beeinträchtigen könnten.
min-height: 100 % für das #wrapper-Element stellt sicher, dass es immer mindestens so hoch wie das Ansichtsfenster ist, auch wenn sein Inhalt ist kürzer. Dadurch wird verhindert, dass der Inhalt zugeschnitten oder scrollbar ist.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass ein Div-Element immer den gesamten Bildschirm einnimmt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!