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

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:

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

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



  <div>
<p>Diese Lösung ist sowohl unkompliziert als auch browserübergreifend kompatibel. Dabei werden vier CSS-Attribute festgelegt:</p>
<ul>
<li>height: 100 % für den  und  Elemente stellen sicher, dass sie den gesamten Bildschirm vertikal ausfüllen.</li>
<li>Rand: 0 für den  und  Elemente entfernt alle Standardränder oder -abstände, die den Vollbildeffekt beeinträchtigen könnten.</li>
<li>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.</li>
</ul>
</div>

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!