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

Zwei Möglichkeiten zum Öffnen und Schließen des MySQL-Dienstes

Bezüglich des Problems der Verwendung von Webpack-Anweisungen in VSCode, das anzeigt: „Weil das Ausführen von Skripten in diesem System verboten ist“ (perfekte Lösung)

Artikel

Detaillierte Erklärung der Ursachen und Lösungen von Konflikten zwischen Filtern und festen

Tutorial zum Ändern der IP-Adresse einer virtuellen Linux-Maschine, Überprüfen des Gateways und Konfigurieren der Netzwerkumgebung

Ändern Sie die IP-Adresse der virtuellen Maschine...

CSS Sticky Footer Mehrere Implementierungen

Zwei Möglichkeiten zum Öffnen und Schließen des MySQL-Dienstes

Tutorial zum Importieren und Exportieren von Docker-Containern

Eine Codezeile löst verschiedene IE-Kompatibilitätsprobleme (IE6-IE10)

So verwenden Sie Docker-Container zur Implementierung der Proxy-Weiterleitung und Datensicherung

JS realisiert die Kartenausgabe-Animation

Bezüglich des Problems der Verwendung von Webpack-Anweisungen in VSCode, das anzeigt: „Weil das Ausführen von Skripten in diesem System verboten ist“ (perfekte Lösung)

Detaillierte Erklärung der Ursachen und Lösungen von Konflikten zwischen Filtern und festen

Detaillierte grafische und textliche Anweisungen zur Installation von MySQL 5.7.20 unter Mac OS

Detaillierte Erklärung des Parsererror-Fehlerfalls in der JavaScript-Lösung in Ajax

CSS3 verwendet Transform-Origin, um Punktverteilung auf einem großen Kreis und Rotationseffekte zu erzielen

Artikel empfehlen

MySQL 8.0.12 – Schnellinstallations-Tutorial

So verwenden Sie JS WebSocket zur Implementierung eines einfachen Chats

CSS-Methode zur Steuerung der Elementhöhe von unten nach oben und von oben nach unten

MySQL 8.0.12 Installations- und Konfigurations-Tutorial

Erläuterung des MySQL-Abfragebeispiels anhand instanziierter Objektparameter

Tutorial zu HTML-Formular-Tags (1):

Tutorial zum Ändern der IP-Adresse einer virtuellen Linux-Maschine, Überprüfen des Gateways und Konfigurieren der Netzwerkumgebung

Tutorial zur Installation des Nvidia-Grafikkartentreibers in Ubuntu 18.04 (mit Bildern und Text)

So implementieren Sie die Kommunikation zwischen Docker-Containern

Die konkrete Umsetzung des JavaScript-exklusiven Denkens

Detailliertes Tutorial zum Abrufen der Oracle 11g-Imagekonfiguration über Docker

Detaillierte Erläuterung möglicher Probleme bei der Konvertierung von Gleitkommadaten in Zeichendaten in MySQL

Centos8.3, Docker-Bereitstellung, Springboot-Projekt, tatsächliche Fallanalyse

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

jQuery implementiert verschachtelte Tab-Funktion