CSS: 100% Höhe bei DIVs
Hin und wieder kommt es vor, dass DIV Elemente 100% hoch sein müssen.
Wozu benötigt man 100% hohe DIV Elemente? Oftmals werden Websites so gestaltet, dass sie 100% der Höhe des Browserfensters ausnutzen sollen. In den Zeiten von AJAX und Web 2.0 sollen immer öfter DHTML Fensterchen aufgehen und der Rest der Seite ausgegraut werden.
Wenn man beachtet, wie eine HTML Seite aufgebaut ist, ist es eigentlich recht einfach.
Gegeben ist folgendes HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1">
<div id="page">
</div>
</form>
</body>
</html>
Das Element mit der ID "page" soll 100% der Seitenhöhe nutzen und 48.7em (das entspricht mit normalen Einstellungen ca 780px) breit sein. Damit das Element auf der weißen Seite sichtbar wird, so es temporär rot eingefärbt werden.
normalerweise würde man jetzt hingehen und folgende Formatierung für die ID "page" in die CSS Datei schreiben:
#page
{
height: 100%;
width: 48.7em;
background-color: red;
}
Damit es keine Ränder gibt wird man den BODY und das FORM ebenfalls formatieren:
body, form
{
margin: 0px;
padding: 0px;
}
Mit dem Resultat, das unser DIV jetzt genau eine Zeile hoch, rot und 48.7em breit ist, obwohl 100% angegeben ist.
Bis hier hin werden alle schon gekommen sein... ;-)
100% ist eine relative Angabe. Wir müssen uns also Fragen: "100% von was?"
Vom Fenster, klar. Aber woher weis das CSS wie hoch das Fenster ist? Gar nicht!
CSS formatiert Elemente, relativ zum vorhergehenden, oder relativ zum übergeordneten. So werden Positionierung in den meisten Fällen relativ zum vorherigen Element vorgenommen. Und das meiste andere, relativ zum übergeordneten.
Was heißt das? Das heißt, dass das DIV jetzt 100% die Höhe des vorhergehenden Elements hat, bzw. die Höhe des Whitespace Zeichens innerhalb des DIVs
Was tun? Die Lösung liegt auf der Hand. Wir müsse die Elemente HTML, BODY, und FORM ebenfalls auf 100% Höhe setzen:
html, body, form
{
height: 100%;
margin: 0px;
padding: 0px;
}
#page
{
height: 100%;
width: 48.7em;
background-color: red;
}
HTML als oberstes Element, ist damit genau so hoch wie die Frame des Browserfensters und die untergeordneten Elemente BODY und FORM sind genauso hoch wie das jeweilige übergeordnete.
Im IE7 muss der FORM Tag fälschlicherweise nicht berücksichtigt werden. Es würde also reichen nur HTML und BODY 100% groß zu machen. Firefox und Opera benötigen dagegen ein 100% hohes FORM Tag.
