Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 9

Fußzeilen mit HTML und CSS standardkonform umsetzen: Bodenhaftung

    Fußzeilen mit HTML und CSS standardkonform umsetzen: Bodenhaftung

Viele werden das Problem kennen: Das Screendesign spezifiziert einen sogenannten Footer (zu Deutsch: Fußzeile), der bei beliebigem Inhalt immer am unteren Ende des Browserfensters zu finden sein soll. Wenn der Inhaltsbereich später anwächst, soll der Footer weiterhin einen optischen Abschluss bilden, er muss also durch den Content nach unten geschoben werden. Dieser Artikel stellt eine Lösung für diese Problem auf Basis von CSS vor.

Zu Zeiten der guten alten Tabellenlayouts war ein klassischer Footer gar kein Problem: Man nehme eine Tabelle mit einer Höhe von 100% und positioniere seine Elemente darin. Heutzutage, mit Rücksicht auf Webstandards und einer Verantwortung gegenüber den Zielen des Semantic Web, ist das keine ernstzunehmende Option mehr. Widmen wir uns also dem Weg zur Lösung, ein Footer, der bei beliebig komplexem Inhalt sowohl optisch als auch semantisch den Abschluss einer Seite bildet, dabei aber auch valide und browserübergreifend funktionieren soll.

Die Basiszutaten

Um ein Element absolut in einem anderen zu positionieren, muss das Elternelement relativ positioniert sein, dass heißt, um den Footer passend setzen zu können, benötigen wir einen „Container“, der relativ positioniert ist. In diesem Container befindet sich zusätzlich unser Contentblock, der im Normalfall die Höhe des Containers je nach seinem Inhalt vergrößert oder verkleinert. Das führt zu folgendem Markup:

HTML

<div id=“page“>
	<div id=“content“>...</div>
	<div id=“footer“>...</div>
</div>

Listing 1

Folgender CSS-Code setzt die obigen Überlegungen um:

CSS

#page  { 
position:relative;	
}
#footer {
position:absolute;
bottom:0;		
}

Listing 2

Da absolut positionierte Elemente aus dem normalen Elementfluss genommen und über normal fließende Elemente gesetzt werden, muss je nach Höhe des Footers noch ein Bottom-Padding zum Content-Bereich hinzugefügt werden:

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden