Wie erstelle ich eine Sticky Footer, die am Ende der Seite oder im Inhalt verbleibt, je nachdem, was darunter liegt?

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

Wenn die Höhe des dynamisch geladenen Inhalts im

Wenn der Abschnitt unterschiedlich ist, kann dies zu einem verwirrenden Problem führen: Wie kann die Abschnitt am unteren Rand des sichtbaren Inhalts bleiben und sich gleichzeitig an die untere Grenze des Browserfensters anpassen?

Flexbox-Version

Für diejenigen, die den Vorteil der Verwendung von Flexbox haben, ist das Erreichen dieser klebrigen Fußzeile ein Kinderspiel Kuchen. Durch das Einschließen aller Elemente in einem Flex-Container mit einem höhenverlängernden Wrapper kann sich die Fußzeile mühelos an dynamische Inhalte anpassen.

Konfigurieren Sie einfach das Wrapper-Element mit display: flex und flex-direction: Column. Weisen Sie dann mindestens ein Geschwisterelement mit einem Flex-Wert über 0 zu, z. B.:

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

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

article {
  flex: 1;
}

Html-Markup:

<div>

Dieser Ansatz klebt die Fußzeile effektiv an den unteren Rand des Browserfenster, wenn der Inhalt kurz ist, und passt seine Position dynamisch an die Höhe längerer Inhalte an.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Sticky Footer, 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!