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
Die Darstellung und Öffnungsmethode eines Hyperlinks
<br />Verwandte Artikel: So rufen Sie einen ...
Eine kurze Diskussion über die Fallstricke und Lösungen der neuen Features von MySQL 8.0 (Zusammenfassung)
1. Benutzer anlegen und autorisieren Das Erstelle...
Native Netzwerkanforderungsschema von Vue und Netzwerkanforderungsbibliothek von JS
1. Native Netzwerkanforderung 1. XMLHttpRequest (...
Kostenlose Installationskonfigurationsmethode für MySQL 5.7.18 WinX64
1. Herunterladen 2. Dekompression 3. Fügen Sie di...
Konfiguration der Fensterumgebung Mysql 5.7.21 windowx64.zip kostenlose Installationsversion Tutorial detaillierte Erklärung
1. Laden Sie mysql-5.7.21-windowx64.zip von der o...
Win2008 R2 MySQL 5.5 ZIP-Format MySQL-Installation und -Konfiguration
Installation und Konfiguration von MySQL im ZIP-F...
Detaillierte Verwendung des Linux-Textsuchbefehls find
Der Befehl „Find“ wird hauptsächlich zum Suchen v...
Zusammenfassung der HTML-Formatierungsstandards für webbasierte E-Mail-Inhalte
1. Seitenanforderungen 1) Verwenden Sie standardm...
Wird die Tabelle durch ein Update in einer MySQL-Transaktion gesperrt?
Zwei Fälle: 1. Mit Index 2. Ohne Index Voraussetz...
Der Unterschied zwischen ID- und Name-Attributen von HTML-Elementen
Heute bin ich etwas verwirrt über <a href="...
Eine kurze Analyse der MySQL-Kardinalitätsstatistiken
1. Was ist die Kardinalität? Mit Kardinalität wir...
Verwenden von react-virtualized zum Implementieren einer langen Liste von Bildern mit dynamischer Höhe
Inhaltsverzeichnis Während der Entwicklung aufget...
Diagramm der Installationsschritte für MySQL 8.0.11 Community Green Edition für Windows
In diesem Tutorial verwenden wir für die Installa...
So testen Sie die maximale Anzahl von TCP-Verbindungen in Linux
Vorwort Es besteht ein Missverständnis bezüglich ...
Details zu Linux-Dateideskriptoren, Dateizeigern und Inodes
Inhaltsverzeichnis Linux - Dateideskriptor, Datei...