CSS Sticky Footer Mehrere Implementierungen

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

Artikel empfehlen

Tutorial zur HTML-Tabellenauszeichnung (41): Breiten- und Höhenattribute der Tabellenüberschrift WIDTH, HEIGHT

Standardmäßig werden Breite und Höhe der Kopfzeil...

Schritte zur Überprüfung der MySQL InnoDB-Row_ID-Grenzwertüberschreitung

Hintergrund Ich habe mit meinen Klassenkameraden ...

Der Unterschied zwischen Datenzeit und Zeitstempel in MySQL

In MySQL gibt es drei Datumstypen: Datum (Jahr-Mo...

Ein Beispiel für die Implementierung einer einfachen Endlosschleifen-Scrolling-Animation in Vue

Dieser Artikel stellt hauptsächlich ein Beispiel ...

Sequenzimplementierungsmethode basierend auf MySQL

Das Team ersetzte den neuen Rahmen. Alle neuen Un...

So lösen Sie die Elementbewegung, die durch einen per Hover generierten Rahmen verursacht wird

Vorwort Manchmal verschiebt sich der Inhalt des E...

Vorteile und Prinzipien der MySQL-Replikation im Detail erklärt

Bei der Replikation werden die DDL- und DML-Opera...

JS implementiert das Schlangenspiel

Inhaltsverzeichnis 1. Initialisierungsstruktur 2....

MySQL-Anweisung zum Abrufen aller Daten oder Monate in einem angegebenen Zeitraum (ohne Festlegen gespeicherter Prozeduren oder Hinzufügen von Tabellen)

mysql ruft alle Daten oder Monate in einem Zeitra...

JS realisiert die automatische Wiedergabe der Timeline

Vor kurzem habe ich einen solchen Effekt implemen...

Auszeichnungssprachen – Was lernen, nachdem man HTML gelernt hat?

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...

Detaillierte Erläuterung des neuesten IDEA-Prozesses zum schnellen Bereitstellen und Ausführen von Docker-Images

Hintergrund Verwenden Sie Idea mit Docker, um den...

Vollständige Schritt-für-Schritt-Anleitung zur Installation und Deinstallation von MySQL 8.0.26

Inhaltsverzeichnis Vorwort 1. Installation 1. Dow...

Einführung in die Partitionierung des Stammverzeichnisses von Ubuntu mit der virtuellen Maschine Vmvare

Inhaltsverzeichnis Vorwort Begründung Verfahren 1...

So erstellen Sie eine Tabelle in MySQL und fügen Feldkommentare hinzu

Code und Beispiele direkt posten #Schreiben Sie K...