Während der Arbeit für Werbeagenturen ist mir aufgefallen, dass die meisten Designs als CSS Layout mit 100% Höhe am schönsten zur Geltung kommen. Eine prozentuale Breite für ein Web-Layout, das ursprünglich eine feste Breite hatte, lässt sich selten umsetzen. Eine prozentuale Höhe jedoch schon. Von prozentualen Maßen wollen Werbeagenturen in der Regel auch nichts wissen. Denn im Print Bereich, in welchem die Wurzeln der Agenturen liegen gibt es so etwas nicht. Was dabei nicht beachtet wird ist das der Designer bei einem Printmedium weiß wie groß die zu bedruckende Fläche ist. Im Web ist das anders. Die Größe und Auflösung des Bildschirm der Betrachter stehen nicht fest.
Das folgende HTML Grundgerüst wird hierfür benötigt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Horizontal zentriertes 100% Höhe CSS Layout</title> </head> <body> <div id="wrapper"> Inhalt <div id="footer"> Fußzeile </div> </div> </body> </html> |
Dieser CSS Quellcode muss noch in den Style Tag des Dokuments eingefügt oder aus einer seperaten CSS Datei eingebunden werden:
/* Mit dem Universalselektor standardmäßige Innen- und Außenabstände entfernen */ * { margin: 0; padding: 0; } /* Scrollbar einblenden, damit die Seite bei langem Inhalt nicht springt */ html { overflow: -moz-scrollbars-vertical; /* Firefox */ overflow-y: scroll; } /* Ohne diese Angaben kann der Wrapper keine 100% Höhe haben */ html, body { height: 100%; } /* Keine Rahmen um Bilder anzeigen */ img { border: 0; } /* Gestrichelte Rahmen beim Klicken von Links entfernen */ :focus { outline: none; } div#wrapper { position: relative; /* Wird für den Footer benötigt */ margin: 0 auto; /* Horizontales zentrieren des Wrappers */ width: 995px; /* Ohne Breitenangabe kann der Wrapper nicht zentriert werden */ background: #f0f0f0; height: auto !important; height: 100%; /* Verhält sich wie min-height im IE6 */ min-height: 100%; } div#footer { position: absolute; width: 100%; bottom: 0; /* Footer am Ende des Browsers festsetzen */ background: #dddddd; border-top: 6px double gray; } |
Das padding-bottom des Inhalt DIV’s, das nicht im Quellcode vorhanden ist, muss mindestens so groß sein wie die Höhe Footers. Beachtet man dies nicht verschwindet ein Teil des Inhalts hinter dem Footer. Zusätzlich sollten noch Schriftart und Schriftgrößen im CSS definiert werden. Da hierbei sonst Abweichungen in den verschiedenen Browsern entstehen. Eine Demo findest du hier.
Mit dieser Layout Vorlage sollte es dir ein leichtes sein eine Webseite mit zentriertem Inhalt und 100% Höhe zu erstellen. Ich hoffe das ist ein schönes nachträgliches Weihnachtsgeschenk für dich. Frohe Weihnachten noch. 