Wie halten Sie Ihre Fußzeile dort, wo sie hingehört?

Dieser Beitrag ist auch auf Koreanisch verfügbar .

Eine Fußzeile ist das letzte Element auf der Seite. Zumindest befindet es sich am unteren Rand des Ansichtsfensters oder niedriger, wenn der Seiteninhalt größer als das Ansichtsfenster ist. Einfach, richtig? ?

Bei der Arbeit mit dynamischen Inhalten, die eine Fußzeile enthalten, tritt manchmal ein Problem auf, bei dem der Inhalt einer Seite nicht ausreicht, um ihn zu füllen. Die Fußzeile bleibt nicht am unteren Rand der Seite, wo wir möchten, dass sie bleibt, sondern erhebt sich und lässt ein Leerzeichen darunter.

Für eine schnelle Lösung können Sie die Fußzeile absolut am unteren Rand der Seite positionieren. Dies hat jedoch seinen eigenen Nachteil. Wenn der Inhalt größer als das Ansichtsfenster wird, bleibt die Fußzeile am unteren Rand des Ansichtsfensters hängen, unabhängig davon, ob wir dies möchten oder nicht.

Dies zeigt das Verhalten, das wir nicht wollen und wollen:

Schauen wir uns einen Ansatz an, um dies zu erreichen.

Kontrolle über Ihre Fußzeile

index.html::

main.css::

#page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 2.5rem; /* Footer height */ } #footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem; /* Footer height */ }

Also, was macht das?

  • Das page-containergeht um alles auf der Seite herum und legt seine Mindesthöhe auf 100% der Höhe des Ansichtsfensters fest ( vh). So wie es ist relative, können seine untergeordneten Elemente absolutespäter basierend auf der Position festgelegt werden.
  • Das content-wraphat eine untere Polsterung, die der Höhe der Fußzeile entspricht, um sicherzustellen, dass genau genug Platz für die Fußzeile in dem Container verbleibt, in dem sich beide befinden. Hier wird eine Umhüllung divverwendet, die alle anderen Seiteninhalte enthält.
  • Das footerist so eingestellt absolute, dass es an dem festhält, bottom: 0in dem page-containeres sich befindet. Dies ist wichtig, da es sich nicht absoluteum das Ansichtsfenster handelt, sondern sich nach unten bewegt, wenn das page-containerFenster größer als das Ansichtsfenster ist. Wie bereits erwähnt, wird seine Höhe, die 2.5remhier willkürlich eingestellt ist, content-wrapoben verwendet.

Und da hast du es. Ihre Fußzeile bleibt jetzt dort, wo Sie es erwarten würden!

Letzter Schliff

Dies ist natürlich CSS, daher wäre es ohne einige mobile spezifische UX-Überlegungen und einen alternativen Ansatz, der min-height: 100%statt verwendet wird, nicht vollständig 100vh. Dies hat jedoch seine eigenen Nachteile.

Flexbox (mit Flex-Grow) oder Grid können ebenfalls verwendet werden und sind beide sehr leistungsfähig.

Welche Methode Sie wählen, liegt ganz bei Ihnen und den Besonderheiten Ihres Designs. Das obige Beispiel und die Links helfen Ihnen hoffentlich dabei, Zeit zu sparen, wenn Sie Ihre Entscheidung treffen und umsetzen.

Danke fürs Lesen. Hier sind einige andere Dinge, die ich kürzlich geschrieben habe:

  • Ein Leitfaden für Anfänger zum Elastic Container Service von Amazon
  • Testreaktion mit Scherz und Enzym