CSS sorgt dafür, dass der Footer automatisch unten bleibt, wenn die Inhaltshöhe nicht ausreicht

CSS sorgt dafür, dass der Footer automatisch unten bleibt, wenn die Inhaltshöhe nicht ausreicht

Beim UI-Schnittprozess besteht die Seite häufig aus drei Teilen: Kopfzeile, Inhalt und Fußzeile. Wenn der Inhalt der Seite nicht hoch genug ist, um den Bildschirm auszufüllen, schwebt die Fußzeile mit dem Inhalt nach oben. Der kleine Bildschirm hat eine begrenzte Höhe und es sind keine Anomalien zu sehen, aber wenn es sich um einen großen Bildschirm handelt, bleibt unten viel leerer Raum, was das Erscheinungsbild stark beeinträchtigt.

Lösung 1: Flex-Box

Die Kopfzeile verwendet position: sticky;, um den oberen Bereich zu absorbieren, und verwendet dann eine Box (main), um den Inhalt (container > content) und den unteren Bereich (footer) zu umschließen. Die Mindesthöhe dieser Box ist auf die verbleibende Bildschirmhöhe ohne Kopfzeile eingestellt: min-height: calc(100vh - 50px);, und die Box verwendet ein elastisches Layout (flex: 1 1 auto;), damit der Inhaltsbereich automatisch erweitert wird, während der untere Bereich unverändert bleibt (flex: 0 0 auto;), sodass der untere Bereich automatisch den unteren Bereich absorbiert, wenn nicht genügend Inhalt vorhanden ist, und automatisch nach unten verschoben wird, wenn genügend Inhalt vorhanden ist.

Beispiel:

<html>
  <Kopf>
    <title>CSS zum Erreichen des unteren Endes (Fußzeile) - Lösung 1: Flex-Box</title>
    <Stil>
      Körper {
        Rand: 0;
      }
      Kopfzeile {
        Höhe: 50px;
        Hintergrund: #20c997;
        Position: klebrig;
        oben: 0;
      }
      hauptsächlich {
        Anzeige: Flex;
        Flex-Flow: Spalte Nowrap;
        Mindesthöhe: berechnet (100vh – 50px);
      }
      .container {
        flex: 1 1 auto;
      }
      .Inhalt {
        Hintergrund: #0d6efd;
      }
      Fußzeile {
        flex: 0 0 auto;
        Hintergrund: #fd7e14;
      }
    </Stil>
  </Kopf>
  <Text>
    <!--Überschrift-->
    <Kopfzeile>
      Kopfzeile
    </header>
    <Haupt>
      <div Klasse="Container">
        <!--Inhalt-->
        <div Klasse="Inhalt">
          Inhalt
        </div>
      </div>
      <!--Unten-->
      <Fußzeile>
        Fußzeile
      </Fußzeile>
    </main>
  </body>
</html>

Online-Demo: https://codepen.io/mazeyqian/pen/rNeymdG

Vorteile: Die Bodenhöhe ist beliebig erweiterbar.

Nachteile: Es gibt Kompatibilitätsprobleme (Flex-Box & Calc) mit älteren Browsern.

Lösung 2: Negativer Rand unten

Der Inhaltsbereich wird auf eine Mindesthöhe eingestellt, um die Seite auszufüllen, und unten wird ein negativer Rand gleicher Höhe festgelegt.

Beispiel:

<html>
  <Kopf>
    <title>CSS zum Erreichen des unteren Rands (Fußzeile) - Lösung 2: negativer Abstand unten `margin`</title>
    <Stil>
      Körper {
        Rand: 0;
      }
      Kopfzeile {
        Höhe: 50px;
        Hintergrund: #20c997;
        Position: klebrig;
        oben: 0;
      }
      .container {
        Mindesthöhe: berechnet (100vh – 50px);
      }
      .Inhalt {
        Hintergrund: #0d6efd;
      }
      Fußzeile {
        Höhe: 50px;
        Rand oben: -50px;
        Hintergrund: #fd7e14;
      }
    </Stil>
  </Kopf>
  <Text>
    <!--Überschrift-->
    <Kopfzeile>
      Kopfzeile
    </header>
    <div Klasse="Container">
      <!--Inhalt-->
      <div Klasse="Inhalt">
        Inhalt
      </div>
    </div>
    <!--Unten-->
    <Fußzeile>
      Fußzeile
    </Fußzeile>
  </body>
</html>

Online-Demo: https://codepen.io/mazeyqian/pen/eYZvjzr

Damit ist dieser Artikel über die Verwendung von CSS zum automatischen Anheften der Fußzeile an den unteren Rand abgeschlossen, wenn die Inhaltshöhe nicht ausreicht. Weitere Informationen zum automatischen Anheften der Fußzeile mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Zeitzonenprobleme mit im Docker-Container bereitgestelltem Django

>>:  Wissenspunkte und Nutzungsdetails zu globalen Variablen und globalen Objekten von Nodejs

Artikel empfehlen

So erstellen Sie einen neuen Benutzer in CentOS und aktivieren die Schlüsselanmeldung

Inhaltsverzeichnis Neuen Benutzer anlegen Neue Be...

Detaillierte Erläuterung der häufig verwendeten integrierten Anweisungen von Vue

<Text> <div id="Wurzel"> &l...

So fügen Sie Docker ein Zertifikat hinzu

1. Upgrade-Vorgang: sudo apt-get update Probleme ...

Wissen Sie, warum Vue-Daten eine Funktion sind?

Erklärung auf der offiziellen Website: Wenn eine ...

Vue implementiert ein Suchfeld mit einer Lupe

In diesem Artikel erfahren Sie, wie Sie mit Vue e...

MySQL Series 6-Benutzer und Autorisierung

Inhaltsverzeichnis Tutorial-Reihe 1. Benutzerverw...

Zusammenfassung praktischer Methoden für JS-Anfänger zur Verarbeitung von Arrays

Methode join(): verbindet alle Elemente eines Arr...

Verwenden Sie momentJs, um eine Countdown-Komponente zu erstellen (Beispielcode)

Heute möchte ich einen Countdown von Vue und Mome...

js realisiert 3D-Soundeffekte durch audioContext

In diesem Artikel wird der spezifische Code von j...

Detaillierter Prozess zum Erstellen eines NFS-Servers mithilfe des NFS-Ganesha-Image von Docker

Inhaltsverzeichnis 1. Einführung in NFS-Ganesha 2...

So stellen Sie vom lokalen Windows-Remotedesktop eine Verbindung zum Alibaba Cloud Ubuntu 16.04-Server her

Der lokale Windows-Remotedesktop stellt eine Verb...

Installieren Sie mehrere PHP-Versionen für Nginx unter Linux

Wenn wir die LNPM-Serverumgebung installieren und...

Wo wird der von IntelliJ IDEA mit Tomcat bereitgestellte Projektspeicherort verwendet?

Nachdem IntelliJ IDEA ein Javaweb-Projekt mit Tom...

Informationen zu Problemen bei der automatischen Bereitstellung von Jenkins + Docker + ASP.NET Core (Fallstricke vermeiden)

Ich hatte nicht vor, diesen Blog zu schreiben, ab...

Implementierung einer Bildfragmentierungsladefunktion basierend auf HTML-Code

Heute werden wir einen fragmentierten Bildladeeff...