200904Jan

CSS: Sticky Footer

Viele Websites haben heutzutage einen Footer (Fußleiste), der sich immer am unteren Ende der Seite befindet. Die Web 2.0-Ära zeichnet sich unter Anderem auch durch eben solche großzügig gestalteten Fußbereiche aus, so dass diesem Designelement immer mehr Gewichtung zugeschrieben wird. Der Footer "klebt" also am auch Seitenrand, wenn der Inhalt nicht die komplette Höhe der Seite ausfüllt — sollten durch den Seiteninhalt Scrollbalken benötigt werden, ist der "sticky Footer" immer das abschließende Element der Seite. Die HTML/CSS-Programmierung eines solchen Footers ist zwar nicht komplex, jedoch muss man einen Trick anwenden, damit alles klappt. Daher habe ich ein minimalistisches HTML-Template erstellt, das Ihr einfach benutzen könnt, wenn Ihr in Eurem Projekt einen Footer dieser Art benötigt. Der Code des Konstrukts muss nicht mehr verändert werden und es muss lediglich die Höhe des Footers angepasst werden. Die Lösung funktioniert in allen gängigen Browsern und ist damit sofort anwendbar.

Ich gehe hier nun lediglich auf die Teile des Codes ein, die entscheidend sind. Der HTML-Teil des Templates ist simpel aufgebaut (hier mit Header und Menü):

  • <body>
  • <div id="root">
  • <div id="header"></div>
  • <div id="menu"></div>
  • <div id="content"></div>
  • <div id="minheight"></div>
  • <div id="footer"></div>
  • </div>
  • </body>

Das HTML-Grundgerüst wird also von einem großen Container (root) umschlossen, der eine feste Breite (in Pixel) und eine Höhe von 100% besitzt — der Footer befindet sich am unteren Ende dieses Containers und damit am Ende der ganzen Seite. Die restlichen Container besitzen die Eigenschaft "float:left;" und richten sich somit in dem Hauptcontainer links aus. Das trickreiche und entscheidende Element ist der Container "minheight". Dieses Element sorgt dafür, dass der Footer auch dann stehen bleibt, wenn das Browserfenster verkleinert und der Footer den unteren Rand des nächsten Containers erreicht. Der "minheight"-Container ist also ein reiner Platzhalter, der keine Eigenschaften außer einer festen Höhe besitzt, die den negativen Abstand (margin) des Hauptcontainers wieder ausgleicht. Dieser Platzhalter muss in der HTML-Struktur immer nach dem letzten Container platziert werden, dessen Inhalt den Footer "stoppen" soll. Die Höhe des Footers (footer) ist gleich mit der Höhe des Platzhalters. Um dies besser zu verstehen, ist hier ein Auszug des entsprechenden CSS-Codes.

  • div#root {
  • position:relative;
  • width:750px;
  • height:auto !important;
  • height:100%;
  • min-height:100%;
  • margin:0px auto -30px;
  • }
  •  
  • div#minheight {
  • height:30px;
  • clear:both;
  • }
  •  
  • div#footer {
  • position:absolute;
  • bottom:0px !important;
  • width:750px;
  • height:30px;
  • margin:0px auto;
  • }

Wie man sieht, erhält der Container "root" die Höhe 100% und durch das Setzen von "height:auto !important;" wird gewährleistet, dass der Footer beim Verkleinern des Browserfensters auch nach dem letzten Container stehen bleibt. Das fertige Template könnt Ihr Euch hier ansehen bzw. herunterladen.

RSS-Feed abonnieren Bookmark bei Del.icio.us Bookmark bei Mister Wong