Eine einfache Möglichkeit, eine HTML-Fußzeile am unteren Ende der Seite einzufügen

Anforderung: Manchmal, wenn der Seiteninhalt kurz ist und die Browserhöhe nicht unterstützen kann, Sie aber möchten, dass sich die Fußzeile am unteren Rand des Fensters befindet.

Idee: Die Mindesthöhe der übergeordneten Ebene des Fußbereichs beträgt 100 %. Der Fußbereich wird so eingestellt, dass er relativ zur übergeordneten Ebene ganz unten (unten: 0) liegt, und die Höhe des Fußbereichs muss in der übergeordneten Ebene reserviert werden.

HTML Quelltext:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

< div id = "wapper" >
< div id = "Hauptinhalt" >
</div>
< div id = "Fußzeile" >
</div>
</div>

Das CSS lautet wie folgt:

CSS- CodeInhalt in die Zwischenablage kopieren

#wapper {
Position : relativ ; /*Wichtig! Stellen Sie sicher, dass der Fußbereich absolut relativ zur Wapper-Position ist */
height : auto ; /*Sorgen Sie dafür, dass die Seite bei erweiterter Browserhöhe normal angezeigt werden kann*/
min-height : 100% /* IE6 unterstützt dies nicht, IE6 muss separat konfiguriert werden*/
}
# Fußzeile {
Position : absolut ; unten : 0; /* Schlüssel */
left :0; /* Denken Sie unbedingt daran, dies im Internet Explorer zu speichern */
Höhe : 60px ; /* Die Höhe der Fußzeile muss ein fester Wert sein*/
}
#main - Inhalt {
padding-bottom : 60px ; /*Wichtig! Für Fußzeile reservierter Platz*/
}

An diesem Punkt können andere Browser es normal anzeigen, aber IE 6 muss es separat behandeln:

CSS- CodeInhalt in die Zwischenablage kopieren

<!--[wenn IE 6]->
<Stil>
#wapper { height :100%;} /* Der IE erweitert die Ebene automatisch, wenn die Höhe nicht ausreicht*/
</Stil>
<![endif]-->

Die oben beschriebene einfache Implementierungsmethode zum Platzieren der HTML-Fußzeile am unteren Seitenrand ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, dass sie Ihnen als Referenz dienen kann. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

<<: Die neue Version der Chrome-Browsereinstellungen ermöglicht die domänenübergreifende Implementierung

>>: Detaillierte Erklärung der Kernkonzepte und der grundlegenden Verwendung von Vuex

Einführung in die Linux-Dateikomprimierung und -Verpackung

Über den Unterschied zwischen js typeof und instanceof bei der Beurteilung von Datentypen und deren Entwicklung und Verwendung

Inhaltsverzeichnis 1. Typ des Operators 2. Instan...

Eine einfache Möglichkeit, eine HTML-Fußzeile am unteren Ende der Seite einzufügen

Einführung in die Linux-Dateikomprimierung und -Verpackung

Detaillierte Erläuterung der MySQL Innodb-Speicherstruktur und der Speicherung von Nullwerten

So richten Sie domänenübergreifenden Zugriff in IIS web.config ein

Detaillierte Erläuterung der kostenlosen AWS-Serveranwendung und des Tutorials zur Einrichtung eines Netzwerkproxys

Detaillierte Erklärung der React-Komponentenkommunikation

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

Schritte zum Ändern des MySQL-Zeichensatzes auf UTF8 unter Linux

Beispiel für die Erstellung eines XML-Online-Editors mit js

MySQL kontrolliert die Anzahl der Versuche, falsche Passwörter einzugeben

Detailliertes Tutorial zur Installation von Docker und der Docker-Compose-Suite unter Windows

Artikel empfehlen

Detaillierte Erläuterung des Installations- und Verpackungsfalls von JavaScript Axios

Deaktivieren der Implementierungseigenschaften für Eingabetextfelder

Anwendung zur Verarbeitung von HTML-Tag-Überläufen

Detaillierte Erläuterung der Nest.js-Parametervalidierung und des benutzerdefinierten Rückgabedatenformats

So laden Sie Excel-Stream-Dateien herunter und legen den Download-Dateinamen in Vue fest

Detaillierte Erklärung der JavaScript-Prototypenkette

Vue-Kapselungskomponententool $attrs, $listeners-Verwendung

Verwenden Sie Docker, um mehrere PHP-Versionen auf dem Server auszuführen

Über den Unterschied zwischen js typeof und instanceof bei der Beurteilung von Datentypen und deren Entwicklung und Verwendung

61 Dinge, die jeder Webentwickler wissen sollte

Der Unterschied zwischen HTML-Frame, Iframe und Frameset

Zusammenfassung der Wissenspunkte zur Verwendung berechneter Eigenschaften in Vue

Fallstudie zum Zusammenführen von JavaScript-Arrays

Beheben Sie den Nginx-Fehler „504 Gateway Time-out“

Detaillierte Erläuterung des Zeitdarstellungsbeispiels des Linux-Zeitsubsystems