Wie kann ich eine Sticky Footer erstellen, die am Ende des dynamischen Seiteninhalts verbleibt?-CSS-Tutorial-php.cn

Wie kann ich eine Sticky Footer erstellen, die am Ende des dynamischen Seiteninhalts verbleibt?

Linda Hamilton

Freigeben： 2024-12-21 09:52:09

Original

214 Leute haben es durchsucht

Fußzeile am Ende der Seite oder im Inhalt, je nachdem, was niedriger ist

Einführung

Die Beibehaltung der Fußzeile am absoluten Ende der Seite kann eine Herausforderung sein wenn der Inhalt der Seite dynamisch ist und in der Höhe variiert. Dieser Artikel befasst sich mit einer Technik, um die Fußzeile automatisch am unteren Rand des Seiteninhalts oder am unteren Rand des Browserfensters zu positionieren, je nachdem, was tiefer liegt.

Dynamisches Laden von Inhalten

In Ihrem Szenario , der Inhalt wird dynamisch in den

geladen. Element mit JavaScript. Wenn sich der Inhalt ändert, ändert sich die Höhe des

ändert sich auch. Sie möchten die Fußzeile am Ende des Seiteninhalts auch bei diesem dynamischen Laden von Inhalten beibehalten.

Sticky Footers mit Flexbox

Flexbox bietet eine unkomplizierte Lösung für Sticky Footers. Durch das Erstellen eines Flex-Containers (#main-wrapper) mit der Einstellung „Flex-Richtung“ auf „Spalte“ können Sie mehrere Elemente vertikal innerhalb des Containers anordnen.

Der Schlüssel zum Erreichen einer Sticky-Fußzeile mit Flexbox ist die Zuweisung eines Flex-Wert größer als 0 für alle Elemente außer der Fußzeile. Dadurch wird sichergestellt, dass sich diese Elemente ausdehnen, um den verfügbaren Raum vertikal im Container auszufüllen.

In diesem Fall ist der

Dem Element wird „flex: 1“ zugewiesen, wodurch der Browser angewiesen wird, es zu erweitern, um den verbleibenden Platz nach dem Header mit fester Höhe und den Navigationselementen auszufüllen.

Codeausschnitt

Der folgende Code zeigt die Implementierung eine klebrige Fußzeile mit Flexbox:

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

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

article {
  flex: 1;
}

Nach dem Login kopieren

Fazit

Durch die Nutzung der Leistung von Flexbox und die Verwendung von Mit der Eigenschaft „min-height“ für den Container (#main-wrapper) können Sie eine Sticky-Fußzeile erstellen, deren Position automatisch an die Höhe des Inhalts angepasst wird. Dieser Ansatz bietet eine flexible Lösung für das dynamische Laden von Inhalten und stellt gleichzeitig sicher, dass die Fußzeile am unteren Rand der Seite oder des Browserfensters bleibt.

Das obige ist der detaillierte Inhalt vonWie kann ich eine Sticky Footer erstellen, die am Ende des dynamischen Seiteninhalts verbleibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!