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

CSS-Rand halb oder teilweise sichtbarer Implementierungscode

Beispielmethode zum Suchen von Schlüsselwörtern und deren vorangehenden und nachfolgenden Informationen in Linux-Protokollen

Bei der täglichen Arbeit müssen wir häufig Protok...

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

CSS-Rand halb oder teilweise sichtbarer Implementierungscode

Anwendungsszenarien für React useMemo und useCallback

Klicken Sie auf den Ankerlink in JS, um reibungslos zu scrollen und die obere Position frei anzupassen

Zusammenfassung der MySQL-Ansichtsprinzipien und Anwendungsbeispiele

HTML+CSS+JavaScript, um eine Rubbellosversion für die Freundin zu erstellen (Sie werden es lernen, sobald Sie es sehen)

Linux nohup, um Programme im Hintergrund auszuführen und anzuzeigen (nohup und &)

Beispielanalyse langsamer MySQL-Abfragevorgänge [Aktivieren, Testen, Bestätigen usw.]

Detaillierte Erklärung zur Konfiguration des sekundären Domänennamens auf einem Apache-Server in einer Linux-Umgebung

Grundlegendes zum MySQL-Abfrageoptimierungsprozess

Detaillierte Erklärung des digitalen Puzzles CocosCreator Huarongdao

Artikel empfehlen

Embed-Codes für mehrere ältere Player

So implementieren Sie ein horizontales Balkendiagramm mit Prozentangaben in E-Charts

Implementierung der CSS-Auswahl von untergeordneten Elementen für übergeordnete Elemente

Erläuterung der Konfiguration und Verwendung der MySQL-Speicher-Engine InnoDB

Node.js gibt je nach Anforderungspfad unterschiedliche Daten zurück.

Zwei einfache Beispiele für Menünavigationsleisten

So installieren Sie Nginx an einem bestimmten Ort im Centos-System

Beispielmethode zum Suchen von Schlüsselwörtern und deren vorangehenden und nachfolgenden Informationen in Linux-Protokollen

Lösung für dieselbe IP nach dem Klonen der virtuellen Ubuntu 18-Maschine

So setzen Sie das Passwort zurück, wenn Sie es in MySQL8 vergessen haben (die alte MySQL-Methode funktioniert nicht)

Wie wirkt sich der zusammengesetzte Index von MySQL aus?

Vue verwendet GraphVis, um einen unendlich erweiterten Beziehungsgraphen zu entwickeln

Beispiel für die Konvertierung eines Zeitstempels in ein Datum in MySQL

So generieren Sie PDFs und laden sie im Vue-Frontend herunter

So implementieren Sie ein Hover-Dropdown-Menü mit CSS