Wie erstelle ich eine Sticky Footer in HTML?

So stellen Sie sicher, dass Fußzeilen am Seitenende fixiert sind

Bei HTML-Seiten ist es oft wünschenswert, eine feste Fußzeile zu haben, die am Seitenende verbleibt Unten auf der Seite, unabhängig von der Länge des Inhalts. Manchmal können jedoch Stilprobleme dazu führen, dass Fußzeilenelemente nicht die gesamte Seitenbreite einnehmen oder darunter Leerraum lassen.

Um dieses Problem zu beheben, ist die „Sticky Footer“-Technik eine beliebte Lösung. Bei dieser Methode wird ein Wrapper-Element erstellt, das den Hauptinhalt enthält, und ein Push-Element mit der gleichen Höhe wie die Fußzeile.

Indem der untere Rand des Wrappers auf einen negativen Wert gesetzt wird, der der Höhe der Fußzeile entspricht, wird das Push-Element erstellt bis zum Ende der Seite verschoben. Dadurch wird die Fußzeile gezwungen, unabhängig von der Seitenlänge am unteren Rand zu bleiben.

Betrachten Sie zur Veranschaulichung den folgenden CSS-Code:

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 142px;
  /* .push must be the same height as .footer */
}

HTML-Struktur:

<div class="wrapper">
  body goes here
  <div class="push"></div>
</div>
<div class="footer">Footer!</div>

Durch die Implementierung dieses Sticky-Footer-Ansatzes können Sie sicherstellen, dass Ihre Fußzeilenelemente am unteren Rand der Seite fixiert bleiben, die gesamte Seitenbreite ausfüllen und unerwünschte Leerräume vermeiden.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Sticky Footer in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!