Wie kann ich eine Sticky Footer erstellen, die unabhängig von der Höhe des Inhalts am Ende der Seite verbleibt?

Fußzeilenpositionierung: Unten auf der Seite oder im Inhalt, anpassungsfähig an die Höhe

Dynamischer Inhalt, flüssige Fußzeilenplatzierung

Im Webdesign ist dies oft wünschenswert Stellen Sie sicher, dass die Fußzeile unabhängig von der Länge des Inhalts am unteren Rand der Seite oder des Browserfensters bleibt. Dies kann wie folgt erreicht werden:

Flexbox-Lösung

Mit Flexbox ist das Erstellen von Sticky Footern ganz einfach:

1. Definieren Sie einen Flex-Container (z. B. #main- Wrapper) mit Flex-Richtung auf Spalte eingestellt.
2. Stellen Sie die Mindesthöhe des Flex-Containers auf ein 100 %, um sicherzustellen, dass es sich über die gesamte Seitenhöhe erstreckt.
3. Fügen Sie dem Flex-Container ein untergeordnetes Element mit einem Flex-Wert größer als 0 hinzu (z. B. Artikel {flex: 1; }). Dadurch wird das Element vertikal erweitert und die Fußzeile nach unten verschoben.

CSS-Code:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

Das obige ist der detaillierte Inhalt vonWie kann ich eine Sticky Footer erstellen, die unabhängig von der Höhe des Inhalts am Ende der Seite verbleibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!