Vorgehensweise

Ein Container #wrap, der den gesamten Inhalt (außer #footer) umschließt, erhält eine Mindesthöhe von 100%. Da sich die Höhenangabe in % auf den height-Wert des Elternelements bezieht, bekommen die Eltern html und body jeweils height:100%.

Der #footer steht unterhalb des Elements #wrap. Er wird durch einen negativen margin, der so groß wie seine Höhe ist, in den sichtbaren Bereich gezogen.

Bei wenig Inhalt sitzt der #footer immer am unteren Rand des Browserfensters. Wenn der Inhalt mehr Platz benötigt – also gescrollt werden muss – wandert der #footer mit dem Inhalt nach unten.

Diese Technik ist bekannt als footerStickAlt.

Der IE bis einschließlich Version 6 kennt die min-height-Eigenschaft nicht, interpretiert aber die height-Eigenschaft falsch (die Elemente wachsen mit dem Inhalt). Der IE erhält also separat (hier per Hack) ein height:100% für #wrap.

Minimales CSS

  1. * {
  2. margin:0;
  3. padding:0;
  4. }
  5.  
  6. html, body {
  7. height:100%;
  8. }
  9.  
  10. #wrap {
  11. min-height:100%;
  12. }
  13.  
  14. /* IE Win < 7 only \*/
  15. * html #wrap {
  16. height:100%;
  17. }
  18. /* end IE Win < 7 only */
  19.  
  20. #footer {
  21. height:3em;
  22. margin-top:-3em;
  23. }

Minimales HTML

  1. <div id="wrap">
  2. </div>
  3. <div id="footer">
  4. </div>