28.02.2008

Layout mit 100 % Höhe bei fixiertem Header und Footer

Ein CSS-basiertes Layout mit 100 Prozent (Fenster-)Höhe; Header und Footer sollen jeweils am oberen bzw. unteren Rand fixiert sein. Von der Idee her plausibel, die Umsetzung erfordert jedoch ein paar Kniffe, weil der Internet Explorer 6 die CSS-Angaben "min-height" und "position: fixed" nicht interpretiert. Die Seite soll dennoch in möglichst allen Standardbrowsern einheitlich dargestellt werden. Das Ergebnis soll etwa so aussehen.

Für den HTML-Aufbau benutzen wir folgenden Code (bitte das Clearen nicht vergessen!):

<body>

<div id="aussenwrapper">

<div id="innenwrapper">

<div id="header">
<h1>100 % Höhe mit fixiertem Header und Footer</h1>
</div><!--Ende header-->

<div id="leftbox">
<h3>Leftbox</h3>
<p>Fülltext …</p>
</div><!--Ende leftbox-->

<div id="content">
<h3>Content</h3>
<p>Fülltext für den Content...</p>
</div><!--Ende content-->

<span style="clear: both;"></span>

</div><!--Ende innenwrapper-->

<div id="footer">
Footer
</div><!--Ende footer-->

</div><!--Ende aussenwrapper-->

</body>

Entwickeln wir nun die CSS-Angaben für das 100%-Höhen-Layout:

Um einen Bezugspunkt für einen Div mit 100 % Höhe zu haben, weisen wir sowohl dem Elternelement "body" als auch "html" eine Höhe von 100% zu. Außerdem setzen wir die Ränder auf "0" und verwenden bei "body" auch noch 100% Breite. Damit ist eine browsereinheitliche Basis geschaffen. Zur Demonstration sind noch einige Farb- und sonstige Angaben hinterlegt, auf die es jedoch nicht ankommt und auf die deshalb nicht näher eingegangen wird. Die Überschriften sollten jedoch mit einer Schriftgröße und einem margin-Wert hinterlegt sein, da diese sonst von den Browsern mitunter unterschiedlich dargestellt werden.

html
{
height: 100%;
}

body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #f0f0f0;
font-family: Verdana, Arial, sans-serif;
}

h1
{
font-size: 1.2em;
text-align: center;
margin: 0;
}

h3
{
font-size: 1em;
margin: 0;
}

Ein (hier breitenbegrenzter und zentrierter) #aussenwrapper sorgt dafür, dass der spätere Gesamtinhalt immer 100 Prozent Höhe des Bildschirmfensters füllt. Dies wird erreicht durch height: 100%.
position: relative; ist die Grundlage dafür, dass nachfolgend der Header und Footer am oberen bzw. unteren Rand fixiert werden können:

#aussenwrapper
{
height: 100%;
position: relative;
width: 800px;
margin: 0 auto;
background: #D1DEEF;
}

Auch dem #innenwrapper weisen wir 100% Höhe zu. Außerdem noch ein overflow: auto; damit bei größerem Inhalt als 100% dieser nicht über den Footer "hinausschießt":

#innenwrapper
{
height:100%;
overflow:auto;
background: #FFF3D6;
}

Hinweis:
Mit overflow: auto entscheidet der Browser, wie er den "überschüssigen" Inhalt anzeigt. Firefox und Internet Explorer bieten in diesem Fall eine Scroll-Leiste an. Opera ab Version 7 und Konqueror ab Version 3.4 lt. SELFHTML ebenso.
Wird overflow: scroll verwendet, blenden die Browser von vornherein eine Scroll-Leiste ein, die mit Erreichen von überschüssigem Inhalt aktiv wird.
Bei älteren Browsern kann es mit beiden Varianten Probleme geben, indem der überschüssige Inhalt möglicherweise über den Footer hinausragt oder überhaupt nicht angezeigt wird.

#header und #footer werden jeweils absolut positioniert und zwar in Bezug auf das nächsthöhere positionierte Element - hier der #aussenwrapper. Beide erhalten einen Breitenwert von 100%, damit sie sich dem Außenwrapper anpassen.
Hinweis:
Wegen dem Boxmodell müssen wir hier entweder auf seitliche Paddingwerte verzichten, oder diesen Elementen die gleiche Pixelbreite wie dem Außenwrapper zuweisen, abzüglich der verwendeten seitlichen Paddingwerte.

Schließlich weisen wir jeweils noch einen Höhenwert zu, den es nachfolgend noch zu beachten gilt. Daraus ergeben sich für Header und Footer folgende CSS-Angaben:

#header
{
position: absolute;
top: 0;
left:0;
width: 100%;
height:40px;
background: #CCE34A;
}

#footer
{
position: absolute;
bottom: 0;
left:0;
width: 100%;
background: #333;
height:20px;
padding: 3px 0;
text-align: center;
color: #fff;
}

Damit steht bereits unser Außengerippe. Wir füllen es mit einer #leftbox, die z.B. die Navigation aufnehmen kann und einem #content für den Inhalt. Somit haben wir zwei "Spalten", aber auch ein ein- oder dreispaltiges Layout wären denkbar.

#leftbox
{
float: left;
width: 180px;
margin-top: 40px;
background: #ccc;
padding: 5px 5px 25px 5px;
}

#content
{
margin-top: 40px;
margin-left: 190px;
background: #B384A7;
padding: 5px 5px 25px 5px;
}

Beachten wir zunächst den margin-top-Wert von 40px: Er entspricht der Höhe des #headers. Ohne diese Angabe würden die oberen Zeilen von Leftbox und Content unter dem Header verschwinden und wären nicht sichtbar. Weil der Header absolut positioniert ist, ordnen sich die nachfolgenden Elemente nicht automatisch unterhalb von ihm an und müssen deshalb per "margin-top" nach unten "verschoben" werden.

Eine weitere Bedeutung kommt dem padding-bottom-Wert zu, der hier mit 25px angegeben ist. Er entspricht mindestens der Höhe des #footers (hier zur "Reserve" mit 5px größer angegeben, also 25px statt 20px) und bewirkt, dass die letzten Textzeilen nicht hinter dem Footer verschwinden.

Damit ist das Layout mit 100% Höhe und fixiertem Header und Footer bereits fertig und wir können es in der Demo ansehen.
Bleibt noch das Problem der unterschiedlichen Spaltenlängen, das jedoch nur sichtbar wird, wenn unterschiedliche Hintergrundfarben verwendet werden. Wir können es mit dem Faux-Cloumns-Trick lösen, indem wir dem #innenwrapper eine geeignete Hintergrundgrafik zuweisen.

nach oben