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

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
  1. <!-- Übergeordnete Ebene -->      
  2. < div   id = "wapper" >      
  3.      <!-- Hauptinhalt -->      
  4.      < div   id = "Hauptinhalt" >      
  5.      </div>​​      
  6.      <!-- Fußzeile -->      
  7.      < div   id = "Fußzeile" >      
  8.      </div>​​      
  9. </div>​​      

Das CSS lautet wie folgt:

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

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

CSS- CodeInhalt in die Zwischenablage kopieren
  1. <!--[wenn IE 6]->
  2. <Stil>
  3. #wapper { height :100%;} /* Der IE erweitert die Ebene automatisch, wenn die Höhe nicht ausreicht*/      
  4. </Stil>
  5. <![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

Artikel empfehlen

MySQL 8.0.19 Installations- und Konfigurations-Tutorial unter Windows 10

Ich werde nächstes Semester MySQL lernen. Ich hab...

Detaillierte Erläuterung der Position der CSS-Sticky-Positionierung: Sticky-Problemgrube

Vorwort: position:sticky ist ein neues Attribut d...

Html Select verwendet das ausgewählte Attribut, um die Standardauswahl festzulegen

Wenn Sie einer Option das Attribut selected = &quo...

Detaillierte Erläuterung der Installationsmethode von Mysql 5.7.18 und des Prozesses zum Starten des MySQL-Dienstes

MySQL ist eine sehr leistungsfähige relationale D...

Details zum Like-Operator in MySQL

1. Einleitung Beim Filtern unbekannter oder teilw...

Detaillierte Erklärung mehrerer cleverer Anwendungen von position:sticky sticky positioning

Hintergrund: Position: Sticky wird auch Sticky-Po...

Lösung für die Upload-Einschränkung von Element-ui-Uploaddateien

Frage Die Angabe des Typs der hochgeladenen Datei...

CSS3 + Bézierkurve zum Erzielen eines skalierbaren Eingabesuchfeldeffekts

Und hier nun ohne weitere Umschweife die Renderin...

Implementierung des klassischen CSS-Sticky-Footer-Layouts

Was ist ein Sticky-Footer-Layout? Unser übliches ...

Vue implementiert einfache Rechnerfunktion

In diesem Artikelbeispiel wird der spezifische Co...

MySQL-Lerndatenbankbetrieb DML ausführliche Erklärung für Anfänger

Inhaltsverzeichnis 1. Anweisung einfügen 1.1 Einf...

Beispielanalyse der Verwendung des neuen JSON-Feldtyps in MySQL 5.7

Dieser Artikel veranschaulicht anhand eines Beisp...

Ein Beispiel für die Ausführungsreihenfolge zwischen dem href-Sprung und dem onclick des HTML-Hyperlinks a-Tag

Die Ausführungsbeziehung zwischen dem href-Sprung...

JavaScript zum Erzielen eines einfachen Karusselleffekts

Was ist ein Karussell? Karussell: In einem Modul ...

Jenkins+Gitlab+Nginx Bereitstellung einer Front-End-Anwendung

Inhaltsverzeichnis Zugehörige Abhängigkeitsinstal...