Wie kann ich eine Fußzeile am Ende der Seite beibehalten, unabhängig von der Höhe des Inhalts?

Fußzeile am Ende der Seite oder des Inhalts

Problem:

Dynamisch geladener Inhalt innerhalb eines kann in der Höhe variieren. Das Ziel besteht darin, die unten auf der Seite, wenn der Inhalt umfangreich ist, oder unten im Browserfenster, wenn er begrenzt ist.

Antwort:

Flexbox-Version:

Für Browser, die Flexbox unterstützen, besteht eine einfache Lösung darin, die display:flex-Eigenschaft zusammen mit einer Höhe von 100 % für zu verwenden das Wrapper-Element (#main-wrapper). Dadurch wird sichergestellt, dass sich der Wrapper ausdehnt, um das gesamte Ansichtsfenster auszufüllen.

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

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

Innerhalb des Wrappers wird der

sollte einen Flex-Wert von 1 haben, der eine vertikale Erweiterung ermöglicht. Dadurch wird sichergestellt, dass die wird immer an das Ende der Seite oder an das Ende des Inhalts verschoben, je nachdem, was größer ist.

article {
  flex: 1;
}

Überarbeitetes HTML:

<div>

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