Die Fußzeile mit CSS am unteren Rand fixieren

Die Fußzeile mit CSS am unteren Rand fixieren

Es ist ein häufiger Wunsch im Webdesign, die Fusszeile mit CSS am unteren Rand fixieren. Es soll der Footer einfach immer fix am unteren Rand des Browser festgenagelt werden. Eigentlich ist dies dar nicht so schwierig

Die Fußzeile mit CSS am unteren Rand fixieren und formatieren

Dazu brauchen wir einmal ein einfaches HTML-Markup. Um eine HTML-Seite anzuzeigen benötigen wir eben ein paar Elemente. Der Inhalt ist hier zu kurz, damit du den vollen Effekt der fixierten Fußzeile zu sehen. Füge einfach im article-Element mehr Inhalt ein, damit die Seite über den unteren Browserrand hinausreicht. Wir nehmen die Basiselemente und erstellen eine HTML5-Seite (1. Zeile). Danach kommen innerhalb des body-Elements ein Kopfbereich, der Artikel (= Text) und noch die Fußzeile.

Ignorieren wir alles Inhalte und Formatierungen der Seite und konzentrieren uns nur auf das footer-Element und formatieren es:

Das entscheidende sind hier die Zeilen 2 bis 4, denn hier wird erstens die Position fixiert (2. Zeile) und danach das Element an den linken (3. Zeile) und unteren Bildschirmrand (4. Zeile) positioniert. Aber sie wird fixiert und nicht absolut festgelegt. Mit der Eigenschaft fixed wird das Element eben relativ zum Viewport des Browsers positioniert und nicht mehr verschoben.

Blogheim.at Logo