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

mysql ersetzt einen Teil des Feldinhalts und mysql ersetzt die Funktion replace()

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

mysql ersetzt einen Teil des Feldinhalts und mysql ersetzt die Funktion replace()

Grundlegende Verwendung von benutzerdefinierten Anweisungen in Vue

Änderung der Standardquelldatei sources.list des Ubuntu20.04 LTS-Systems

Die Scroll-Ansicht des WeChat-Applets realisiert die Verknüpfung nach links und rechts

TypeScript-Aufzählungstyp

Erste Erkundung gängiger Befehle für Docker-Anfänger

So richten Sie eine VSCode-Remoteverbindung zum Server-Docker-Container ein

Detaillierte Erklärung zur Abfrage von Feldern im JSON-Format in MySQL

Schritte zum Bereitstellen von Hyper-V zur Desktop-Virtualisierung (grafisches Tutorial)

Lösung für den Fehler bei der MySQL-Remoteverbindung

Artikel empfehlen

MySQL effiziente Abfrage Left Join und Gruppieren nach (plus Index)

Allgemeine Überlegungen zum Erstellen eines Hadoop 3.2.0-Clusters

Analyse und Lösung zur Leistungsoptimierung von Vue.js-Anwendungen

Implementierung der QR-Code-Scanfunktion über Vue

Analyse der praktischen Erfahrung bei der Verwendung von Docker zum Erstellen von Microservices mit SpringBoot

Zusammenfassung einiger gängiger Methoden von JavaScript-Arrays

So kapseln Sie Paging-Komponenten manuell in Vue3.0

JavaScript implementiert einfache Rechnerfunktion

So verwenden Sie Nginx, um einen RTMP-Liveserver auszuführen

Lösen Sie das Problem, dass await in forEach nicht funktioniert

Docker-Kern und spezifische Verwendung der Installation

Detaillierte Erklärung zum Schreiben von MySQL ungleich null und gleich null

So rufen Sie mit dem Flash-Plugin die Kamera des PCs auf und binden diese in die TML-Seite ein

Reines CSS, um nach Auswahl des Produkts das Zeichen √ in der unteren rechten Ecke anzuzeigen

MySQL Series 6-Benutzer und Autorisierung