Wie erstellt man einen Container, der immer den gesamten Bildschirm ausfüllt?

So stellen Sie sicher, dass ein

im Vollbildmodus angezeigt wird. Container unabhängig von der Inhaltsgröße

Erzielung eines Vollbild-

Behälter mit unterschiedlichen Inhaltsgrößen können eine Herausforderung sein. Es gibt jedoch eine zuverlässige Lösung, die stets das gewünschte Ergebnis liefert.

Lösung:

Der folgende HTML- und CSS-Code sorgt für eine konsistente Vollbilddarstellung von

Container:

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }
        
        #wrapper {
            min-height: 100%; 
        }
    </style>



    <div>
<p><strong>CSS-Aufschlüsselung:</strong></p>
<ul>
<li>html, body: Setzt die Höhe auf 100 % und entfernt alle Ränder, um sicherzustellen, dass der Container den gesamten Inhalt einnimmt Bildschirm.</li>
<li>#wrapper: Setzt die Mindesthöhe auf 100 %, um sicherzustellen, dass sie sich vertikal ausdehnt, um gleichmäßig auf den Bildschirm zu passen wenn der Inhalt klein ist.</li>
</ul>
<p><strong>Kompatibilität:</strong></p>
<p>Diese Lösung funktioniert gut in allen gängigen Browsern, einschließlich IE. Für eine optimale Darstellung in IE 6 oder früher ist eine zusätzliche CSS-Regel enthalten:</p>
<pre class="brush:php;toolbar:false"><!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
<![endif]-->

Verwendung:

Fügen Sie einfach den HTML- und CSS-Code in Ihr Dokument ein, und alle

Element mit der ID „wrapper“ wird unabhängig von der Inhaltsgröße vertikal erweitert, um den gesamten Bildschirm einzunehmen.