CSS Sticky Footer Mehrere Implementierungen

Was ist „Sticky Footer“

Der sogenannte „Sticky Footer“ ist kein neues Frontend-Konzept und keine neue Technologie. Er beschreibt einen Webseiten-Effekt: Wenn der Seiteninhalt nicht lang genug ist, wird der Footer am unteren Rand des Browserfensters fixiert; wenn der Inhalt lang genug ist, wird der Footer am unteren Rand der Seite fixiert. Wenn der Inhalt der Webseite jedoch nicht lang genug ist, bleibt die untere Fußzeile am unteren Rand des Browserfensters.

Schauen wir uns das folgende Beispiel an. Der Code lautet wie folgt

<div Klasse="Header">
    </div>
<div Klasse="Haupt">
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
</div>
<div Klasse="Fußzeile">
    <i class="fa fa-copyright" aria-hidden="true"></i>
    <div>unten</div>
</div>

.header {
    Hintergrundfarbe: #3498DB;
    Höhe: 50px;
    Zeilenhöhe: 50px;
    Textausrichtung: zentriert;
    Farbe: #fff;
}
.hauptsächlich {
    Überlauf: automatisch;
    Box-Größe: Rahmenbox;
}

.Fußzeile {
    Hintergrundfarbe: #ECF0F1;
    Höhe: 50px;
    Zeilenhöhe: 50px;
    Textausrichtung: zentriert;
}

Aufmerksame Leser dürften das Problem entdeckt haben. Die Position der Fußzeile ändert sich automatisch mit der Höhe des Hauptinhalts. Wenn der Hauptinhalt kleiner als die Ansichtsfensterhöhe ist, wird die Fußzeile nicht unten befestigt. Wie lässt sich dieses Problem also lösen?

negative Marge

<div Klasse="Haupt">
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
</div>
<div Klasse="Fußzeile">
    <i class="fa fa-copyright" aria-hidden="true"></i>
    <div>unten</div>
</div>

html,
Körper {
    Höhe: 100%;
}
.header{
    Hintergrundfarbe: #3498DB;
    Höhe: 50px;
    Zeilenhöhe: 50px;
    Textausrichtung: zentriert;
    Farbe: #fff;
    Position: fest;
    Breite: 100 %;
}
.hauptsächlich {
    Mindesthöhe: 100 %;
    Überlauf: automatisch;
    Box-Größe: Rahmenbox;
    Polsterung unten: 50px;
    Polsterung oben: 50px;
    Rand unten: -50px;
}

.Fußzeile {
    Hintergrundfarbe: #ECF0F1;
    Höhe: 50px;
    Zeilenhöhe: 50px;
    Textausrichtung: zentriert;
}

Lösungen mit fester Höhe

Verwenden Sie die folgenden Eigenschaften

Mindesthöhe
Berechnung
gegen

calc() wurde in CSS3 eingeführt und ermöglicht Ihnen, Berechnungen beim Deklarieren von CSS-Eigenschaftswerten durchzuführen.

Es kann in einigen numerischen Situationen verwendet werden. Weitere Einzelheiten finden Sie hier bei MDN.

vh (Ansichtsfensterhöhe): Wie Sie sich vorstellen können, stellt dies die Höhe des Ansichtsfensters dar.

Detaillierte Informationen und Kompatibilität finden Sie hier: caniuse

Ändern Sie den obigen Code wie folgt

.hauptsächlich {
    Mindesthöhe: berechnet (100vh – 50px – 50px);
}

Dies erreicht unser Erwartungsgemäß, hat jedoch den Nachteil, dass wir die Höhe der Kopf- und Fußzeile jedes Mal neu berechnen müssen.

Dies ist natürlich nicht perfekt. Wenn die DOM-Struktur mehr Ebenen hat, muss mehr Inhalt berechnet werden.

Absolute

Ich glaube, jeder ist mit absoluten Elementen vertraut, daher werde ich hier nicht ins Detail gehen. Achten Sie nur darauf: Auf welcher Grundlage wird die Position eines absoluten Elements berechnet und positioniert?

<div Klasse="Header">
    Kopfbereich
<div Klasse="Haupt">
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
    <p>Mittelteil</p>
</div>
<div Klasse="Fußzeile">
    <i class="fa fa-copyright" aria-hidden="true"></i>
    <div>unten</div>
</div>

html{
    Position: relativ;
    Mindesthöhe: 100 %;
}
Körper{
    Rand unten: 50px;
}
.header {
    Hintergrundfarbe: #3498DB;
    Höhe: 50px;
    Zeilenhöhe: 50px;
    Textausrichtung: zentriert;
    Farbe: #fff;
}
.hauptsächlich {
    Überlauf: automatisch;
}

.Fußzeile {
    Position: absolut;
    unten: 0;
    Breite: 100 %;
    Hintergrundfarbe: #ECF0F1;
    Höhe: 50px;
    Zeilenhöhe: 50px;
    Textausrichtung: zentriert;
}

Der Code ist sehr einfach, hier ist die Hauptpositionsanwendung:

1 Standardmäßig, wenn ein Element auf position:absolute gesetzt ist und das Vorgängerelement nicht position: absolute oder fixed oder relative gesetzt hat

, es ist standardmäßig relativ zum anfänglichen enthaltenden Block.

2 Welche Initialisierer enthalten Blöcke?

Der umschließende Block, in dem sich das Stammelement befindet, ist ein Rechteck, das als anfänglicher umschließender Block bezeichnet wird. Bei kontinuierlichen Medien hat er die Abmessungen des Ansichtsfensters und ist am Canvas-Ursprung verankert.

Dies ist die W3C-Einführung in den umschließenden Block. Die allgemeine Bedeutung dieses Absatzes ist, dass das Stammelement (Dokument) der standardmäßige anfängliche umschließende Block ist und die Größe seines Initialisierungsblocks der Größe des Ansichtsfensters entspricht.

Nachdem wir diese Konzepte verstanden haben, schauen wir uns den obigen Code an. Alles ist auf den ersten Blick klar!

    html{
        Position: relativ;
        Mindesthöhe: 100 %;
    }

    Körper{
        Rand unten: 50px;
    }

position:relative ändert den enthaltenden Block so, dass das absolute Element relativ zum HTML-Element positioniert wird.
min-height: stellt sicher, dass der Footer unten haften kann, wenn der Inhalt nicht für das Ansichtsfenster ausreicht.
Der untere Randwert ist die Höhe des Fußzeilenelements, wodurch sichergestellt wird, dass der Inhaltsbereich nicht durch die Fußzeile abgedeckt wird.

Flexbox

Flexbox ist die perfekte Lösung. Dies lässt sich mit nur wenigen Zeilen CSS erreichen und erfordert keine Berechnungen oder das Hinzufügen zusätzlicher HTML-Elemente wie oben.

Ändern Sie den Code wie folgt:

<div Klasse="Container">
    <div Klasse="Header">
        </div>
    <div Klasse="Haupt">
        <p>Mittelteil</p>
        <p>Mittelteil</p>
        <p>Mittelteil</p>
        <p>Mittelteil</p>
        <p>Mittelteil</p>
        <p>Mittelteil</p>
        <p>Mittelteil</p>
        <p>Mittelteil</p>
        <p>Mittelteil</p>
        <p>Mittelteil</p>
        <p>Mittelteil</p>
        <p>Mittelteil</p>
        <p>Mittelteil</p>
        <p>Mittelteil</p>
        <p>Mittelteil</p>
    </div>
    <div Klasse="Fußzeile">
        <i class="fa fa-copyright" aria-hidden="true"></i>
        <div>unten</div>
    </div>
</div>

html,
Körper {
    Höhe: 100%;
}
.container {
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Mindesthöhe: 100 %;
}
.header {
    Hintergrundfarbe: #3498DB;
    Höhe: 50px;
    Zeilenhöhe: 50px;
    Textausrichtung: zentriert;
    Farbe: #fff;
}

.hauptsächlich {
    Überlauf: automatisch;
    Box-Größe: Rahmenbox;
    biegen: 1;
}

.Fußzeile {
    Hintergrundfarbe: #ECF0F1;
    Höhe: 50px;
    Zeilenhöhe: 50px;
    Textausrichtung: zentriert;
}

Der endgültige Effekt ist wie folgt:

„Negativ = Rand“, „Feste Breite“ und „Absolut“ basieren alle auf einer festen unteren Höhe.

Es wird grundsätzlich empfohlen, die absoluten und flexiblen Implementierungen zu verwenden. Welche Implementierung konkret verwendet werden soll, hängt vom jeweiligen Szenario ab.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Der Unterschied zwischen HTML-Frame, Iframe und Frameset

>>: Umfassende Zusammenfassung zu MySQL GTID

Detaillierte Erklärung zur Verwendung der vue3 Teleport-Sofortbewegungsfunktion

Detaillierte Erläuterung zum Einrichten einer statischen IP-Netzwerkkarte für die virtuelle CentOS 8-VMware-Maschine für den Zugriff auf das Internet

Erster Schritt: Klicken Sie in VMware auf "B...

CSS Sticky Footer Mehrere Implementierungen

Detaillierte Erklärung zur Verwendung der vue3 Teleport-Sofortbewegungsfunktion

Analysieren Sie das Problem der Übertragung von Dateien und anderen Parametern in der Upload-Komponente von Element-UI

Gründe, warum MySQL-Abfragen langsam sind

Ausführliche Erklärung der Iteratoren in ECMAScript

So aktivieren Sie das Root-Konto in Ubuntu 20.04

Front-End-Implementierung der GBK- und GB2312-Kodierung und Dekodierung von Zeichenfolgen (Zusammenfassung)

Beispiel-Tutorial für MySQL-Datenbanktransaktionen

Mysql fragt die ausgeführten Transaktionen ab und wie auf Sperren gewartet werden soll

Analyse des Hintergrundauthentifizierungsprozesses von Vue-Elementen

Spezifische Verwendung des Linux-Befehls „dirname“

Artikel empfehlen

Tutorial zur Installation und Konfiguration der Centos7-MySQL-Datenbank

18 Web-Usability-Prinzipien, die Sie kennen müssen

Detaillierte Erläuterung der ECharts-Mausereignisverarbeitungsmethode

Detaillierte Erläuterung der grundlegenden Docker-Netzwerkkonfiguration

Detaillierte Erläuterung zum Einrichten einer statischen IP-Netzwerkkarte für die virtuelle CentOS 8-VMware-Maschine für den Zugriff auf das Internet

Die Verwendung von Ankerpunkten in HTML_PowerNode Java Academy

Beispielcode zur Implementierung einer dynamischen Spaltenfilterung in einer Vue+Element-Tabelle

Der erste Schritt beim Einstieg in die MySQL-Datenbank besteht darin, eine Tabelle zu erstellen

Detaillierte Beschreibung des komponentenbasierten Front-End-Entwicklungsprozesses

Detaillierte Erklärung der Vue-Ereignisbehandlung und Ereignismodifikatoren

Linux löst das Problem, dass Deepin den Google Chrome-Browser nicht als Root-Benutzer starten kann

CSS kompletter Parallax-Scrolling-Effekt

HTML-adaptives Layout links, zentriert und rechts (mithilfe des Calc-CSS-Ausdrucks)

Detaillierte Erklärung der CSS-Float-Eigenschaft

Ein tiefes Verständnis der spitzen Klammern in Bash (für Anfänger)