footer am Ende der Seite oder des Inhalts, je nachdem, was auch immer länger ist

Einführung

In der Webentwicklung sind es unerlässlich, die richtige Positionierung von Elementen auf einer Webseite zu gewährleisten, insbesondere wenn es sich um dynamische Inhalte handelt. Eine häufige Herausforderung besteht darin, eine Fußzeile zu erreichen, die am Ende der Seite oder des Inhalts bleibt, je nachdem, was niedriger ist.

problem-Anweisung

Die bereitgestellte HTML-Struktur enthält ein übergeordnetes Wrapper-Element (#Main-Wrapper), das eine Anheiges, Navigation, Artikel und Footer enthält. Die Herausforderung besteht darin, die Position der Fußzeile dynamisch auf der Grundlage der Inhaltshöhe innerhalb des Artikelelements anzupassen. Die Fußzeile sollte am Ende der Seite festhalten, wenn es ausreichend Inhalt gibt, aber zum Ende des Browserfensters bewegt wird, wenn der Inhalt begrenzt ist. Flexbox bietet ein vielseitiges Layout -System, das die Positionierung und Ausrichtung von Elementen in einem Container vereinfacht. Indem wir die Fähigkeit von Flexbox verwenden, Elemente vertikal auszurichten, können wir das gewünschte klebrige Fußzentil -Verhalten erreichen. Körper { Höhe: 100%; Rand: 0; Polsterung: 0; } #Hauptschreiber { Anzeige: Flex; Flex-Richtung: Säule; min-hohe: 100%; } Artikel { Flex: 1; }

In diesem Setup ist das #Main-Wrapper-Element der FlexBox-Container, und es verfügt über die Spalte, was bedeutet, dass Elemente vertikal gestapelt werden. Das Artikelelement hat Flex: 1, wodurch es den verbleibenden Raum einnimmt, der nicht vom Header und der Navigation aufgenommen wird. Wenn es im Artikel reichlich Inhalte gibt, wird der Fußzeilen nach unten gedrückt und es am Ende der Seite positioniert. Wenn der Inhalt jedoch begrenzt ist, schrumpft der Artikel und die Fußzeile bewegt sich dynamisch auf den Boden des Browserfensters, da das minheighige des Hauptschreiberelements das Ansichtsfenster immer füllt.