Wie erstelle ich in HTML eine feste Fußzeile am Ende einer Seite?

Erstellen einer festen Fußzeile am Seitenende

In HTML wird eine Fußzeile normalerweise durch eine Div-Klasse namens „footer“ dargestellt. Um dieses Element am Ende der Seite zu fixieren, müssen bestimmte CSS-Eigenschaften implementiert werden.

Der bereitgestellte CSS-Code positioniert die Fußzeile relativ mit einem oberen Wert von 490 Pixeln, was nicht für die Fixierung der Fußzeile an der Seite geeignet ist unten. Darüber hinaus gibt der Code keine Breiteneigenschaft an, was dazu führt, dass die Fußzeile nicht die Seitenbreite ausfüllt.

Um eine feste Fußzeile zu erstellen, kann eine Kombination von CSS-Eigenschaften verwendet werden. Ein gängiger Ansatz ist die Verwendung der „Sticky Footer“-Technik. So lässt es sich umsetzen:

/* Sticky Footer by Ryan Fait */

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.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 */
}

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

Durch die Verwendung dieser Technik bleibt das Fußzeilenelement am unteren Rand der Seite fixiert, auch wenn sich die Höhe des Seiteninhalts anpasst.

Das obige ist der detaillierte Inhalt vonWie erstelle ich in HTML eine feste Fußzeile am Ende einer Seite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!