[Mini-Tutorial XHTML/CSS] Seitenlayout mit 100% Höhe

Die Kategorie “Short-Tipps” werde ich befüllen, wenn ich mir selber Codeschnipsel merken will, die meine Arbeit etwas erleichtern sollen. Allerdings hoffe ich, dass ich euch auch damit die ein oder andere Anregung geben kann.

Da ich gerade dabei bin, für einen Kunden ein PSD umzusetzen und dabei einen Footer erstellen sollte, welcher immer am unteren Ende der Seite liegt, musste ich ein paar Varianten ausprobieren. Dieser Footer (sowie der Header) erstrecken sich über die komplette Breite der Seite, der Contentbereich hat eine fixe Breite, welche mittig ausgerichtet ist. Erste Überlegung: Den Footer absolut immer am Ende des Viewports positionieren. Praktischerweise kam direkt beim Coden die einsicht, dass das Quatsch ist, denn somit wird der Footer ja unabhängig von der Länge des Contents in der Hauptspalte wirklich immer nur am Ende des Viewports positioniert und überdeckt den Content. Was also tun? Die Lösung kam dann auch bei mir relativ schnell und das möchte ich hier nun kurz skizzieren.

Die Seite hat grob folgende Struktur:

<div id="wrapper">
  <div id="header"></div>
  <div id="content"></div>
  <div id="footer"></div>
</div>

Die Lösung ist nun recht einfach. Zunächst sorgt man dafür, dass die Elemente html, body und der wrapper eine feste Höhe von 100% erhalten.

html, body, #wrapper { height: 100%; }

Damit erreicht man, dass nun immer die komplette Höhe zur Verfügung steht.
Da mein content – Bereich floatende Elemente beinhaltet, muss dieser Bereich zwangsläufig auch floaten.

#content { float: left; width: 100%; }

Damit wird nun der content – Bereich immer so lang, wie sein längstes Element innerhalb. Nun ist es ganz leicht, den Footer unten dranzuhängen,
indem man diesem einfach folgende Anweisung mitgibt: