Es ist ein häufiger Wunsch im Webdesign, die Fußzeile mit CSS am unteren Rand fixieren. Es soll der Footer einfach immer fix am unteren Rand des Browser festgenagelt werden. Eigentlich ist dies gar nicht so schwierig, wenn man weiß wie es geht.
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. In WordPress ist dies natürlich schon alles fertig und im Theme enthalten. Aber du schaffst es sicher dies Demonstration auf deinen Blog umzusetzen. Denn eigentlich ist der HTML-Teil nur dafür da, um den Effekt zu demonstrieren.
Der Inhalt ist hier zu kurz, damit du den vollen Effekt der fixierten Fußzeile sehen kannst. 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.
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="UTF-8">
<title>Die Fußzeile mit CSS am unteren Rand fixieren</title>
</head>
<body>
<header>
<h1>Die Fußzeile mit CSS am unteren Rand fixieren</h1>
</header>
<article>
<p>hier steht der Inhalt der Webseite</p>
</article>
<footer>
<p>© 2019, Clemens Gull, The Magical Digital Nomad</p>
</footer>
</body>
</html>
Ignorieren wir alles Inhalte und Formatierungen der Seite und konzentrieren uns nur auf das footer-Element und formatieren es, wie es der folgende Block zeigt. Diesen kannst du auch in deine WordPress-Theme übernehmen. Normalerweise müsste bereits in Stil für die Fußzeile in der style.css (der Layoutdatei deines Blogs) enthalten sein. Dann kannst du die Zeilen #2 – #7 einfach dazu ergänzen. Falls nicht füge den ganzen Block in deine css-Datei ein.
footer {
position: fixed;
left: 0px;
bottom: 0px;
height: 64px;
width: 100%;
background: #E0E0E0;
}
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.
