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

Lösung für die Nginx-Installation ohne Generierung des sbin-Verzeichnisses

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

Lösung für die Nginx-Installation ohne Generierung des sbin-Verzeichnisses

Beispiel für die Verwendung des Nginx-Reverse-Proxys für Go-FastDFS

So aktivieren oder deaktivieren Sie SSH für einen bestimmten Benutzer oder eine bestimmte Benutzergruppe in Linux

Verwenden Sie CSS-Inhaltsattribute, um den Mouseover-Prompt-Effekt (Tooltip) zu erzielen

In IIS 7.5 unterstützt HTML die Include-Funktion wie SHTML (Modulzuordnung hinzufügen).

Tutorial zu HTML-Formular-Tags (4):

JavaScript implementiert einfache Rechnerfunktion

Detaillierte Erklärung der drei Möglichkeiten zum Festlegen von Rahmen in HTML

Deinstallieren Sie die MySQL-Datenbank im Windows-System vollständig, um MySQL neu zu installieren

Lösung für das Problem ungenauer JS-Zahlen

Artikel empfehlen

Win10+Ubuntu 20.04 LTS Dualsysteminstallation (UEFI + GPT) (Bilder und Text, Warnung vor mehreren Bildern)

Super ausführliches Tutorial zur Installation von MySQL 8.0.23

So laden Sie das JAR-Paket über die Webseite auf Nexus hoch

Einfache Installation des vi-Befehls im Docker-Container

Notieren Sie einen Fehlerbehebungsbericht für die hohe CPU-Auslastung des Tomcat-Prozesses

Detaillierte Erläuterung des MySQL-Kombinationsindex und des ganz links stehenden Übereinstimmungsprinzips

XHTML-Tags haben ein schließendes Tag

CSS-Anfänger-Tutorial: Hintergrundbild füllt den gesamten Bildschirm

Detaillierte Erläuterung des Replikationskonfigurationsbeispiels zwischen MySQL-Containern

So zeigen Sie Anwendungsprotokolle von Docker-Containern an

Detailliertes Tutorial zur Installation des Jenkins-Containers in einer Docker-Umgebung

Implementierung der Positionierung von CSS-Unterelementen relativ zu übergeordneten Elementen

So installieren Sie mysql5.6 in Docker unter Ubuntu

Installieren Sie Memcached und die PHP Memcached-Erweiterung unter CentOS

Beispiel für die Verwendung von CSS zum Erzielen eines Schwebeeffekts beim Bewegen der Maus über die Karte