Wie kann ich eine Sticky-Fußzeile erstellen, die am Ende der Seite oder im Inhalt verbleibt, je nachdem, was darunter liegt?

Fußzeile am Ende der Seite oder des Inhalts, je nachdem, was niedriger ist

Einführung

In der Webentwicklung ist es wichtig, Folgendes zu tun Stellen Sie die richtige Positionierung von Elementen auf einer Webseite sicher, insbesondere beim Umgang mit dynamischen Inhalten. Eine häufige Herausforderung besteht darin, eine Fußzeile zu erreichen, die am Ende der Seite oder im Inhalt verbleibt, je nachdem, was tiefer liegt.

Problemstellung

Die bereitgestellte HTML-Struktur enthält a übergeordnetes Wrapper-Element (#main-wrapper), das eine Kopfzeile, eine Navigation, einen Artikel und eine Fußzeile enthält. Die Herausforderung besteht darin, die Position der Fußzeile basierend auf der Inhaltshöhe innerhalb des Artikelelements dynamisch anzupassen. Die Fußzeile sollte am unteren Rand der Seite bleiben, wenn ausreichend Inhalt vorhanden ist, aber an den unteren Rand des Browserfensters verschoben werden, wenn der Inhalt begrenzt ist.

Flexbox-Lösung

Eine robuste Lösung Ein moderner Ansatz zur Lösung dieses Problems besteht in der Nutzung von Flexbox. Flexbox bietet ein vielseitiges Layoutsystem, das die Positionierung und Ausrichtung von Elementen innerhalb eines Containers vereinfacht. Indem wir die Fähigkeit von Flexbox nutzen, Elemente vertikal auszurichten, können wir das gewünschte Sticky-Fußzeilenverhalten erreichen.

CSS-Code

Der folgende CSS-Code verwendet Flexbox, um das Sticky zu implementieren Fußzeile:

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

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

article {
  flex: 1;
}

In diesem Setup ist das #main-wrapper-Element der Flexbox-Container, und das hat er auch Flex-Richtung ist auf Spalte eingestellt, was bedeutet, dass Elemente vertikal gestapelt werden. Das Artikelelement hat Flex: 1, wodurch es den verbleibenden Platz einnimmt, der nicht von der Kopfzeile und der Navigation eingenommen wird.

Wenn der Artikel reichlich Inhalt enthält, wird er vergrößert, um die Fußzeile nach unten zu verschieben und sie an der Position zu positionieren unten auf der Seite. Wenn der Inhalt jedoch begrenzt ist, wird der Artikel verkleinert und die Fußzeile wird dynamisch an den unteren Rand des Browserfensters verschoben, da die Mindesthöhe des #main-wrapper-Elements dafür sorgt, dass es immer das Ansichtsfenster ausfüllt.

Das obige ist der detaillierte Inhalt vonWie kann ich eine Sticky-Fußzeile erstellen, die am Ende der Seite oder im Inhalt verbleibt, je nachdem, was darunter liegt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!