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
js-Version zur Realisierung der Rechnerfunktion
In diesem Artikelbeispiel wird der spezifische Co...
JavaScript implementiert eine einzelne verknüpfte Listenprozessanalyse
Vorwort: Zum Speichern mehrerer Elemente sind Arr...
Implementieren eines Tabellen-Scrollkarusselleffekts durch CSS-Animation
Eine Anwendung einer CSS-Animation mit demselben ...
Beispielskript für inkrementelle MySQL-Sicherungs- und Breakpoint-Wiederherstellung
Einführung Inkrementelles Backup bedeutet, dass n...
MySQL 8.0.21-Installationstutorial unter Windows-System (Abbildung und Text)
Installationsvorschlag : Versuchen Sie, für die I...
Leerzeichenverarbeitung in HTML/CSS und wie Leerzeichen auf der Seite beibehalten werden
Leerzeichenregeln in HTML In HTML werden mehrere ...
MySQL stellt Daten über Binlog wieder her
Inhaltsverzeichnis MySQL-Protokolldateien binlog ...
Vue verwendet Better-Scroll, um ein Beispiel für eine horizontale Scroll-Methode zu erreichen
1. Implementierungsprinzip des Scrollens Das Scro...
Lösung für das Docker-Pull-Timeout
In letzter Zeit ist das Abrufen von Docker-Images...
Centos8 erstellt NFS basierend auf KDC-Verschlüsselung
Inhaltsverzeichnis Konfiguration NFS-Server (nfs....
So verwenden Sie den dd-Befehl in Linux, ohne die Festplatte zu zerstören
Egal, ob Sie versuchen, Daten von einem sterbende...
Warum ist der MySQL-Autoinkrement-Primärschlüssel nicht kontinuierlich?
Inhaltsverzeichnis 1. Einleitung 2. Beschreibung ...
So installieren Sie die Odoo12-Entwicklungsumgebung unter Windows 10
Vorwort Da viele Freunde sagen, dass sie keinen M...
Python schreibt die Ausgabe in den CSV-Vorgang
Wie unten dargestellt: def test_write(selbst): Fe...
JavaScript, um das Bild mit der Maus zu bewegen
In diesem Artikel wird der spezifische JavaScript...