 CSS 100% Layout
Sicher habt ihr schon Webseiten gesehen, die sich dynamisch an die Fenstergröße anpassen. Hierbei ist die Höhe der Webseite immer genauso hoch, wie die des Browserfensters. Und die Breite passt sich dynamisch an die des Fensters an. Hier wird erklärt, wie man dies in HTML und CSS aufbaut.
Das MarkupZuerst bauen wir uns eine HTML-Seite zusammen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>100% Layout</title>
<link href="/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">Content</div>
</body>
</html>
In Zeile 6 binden wir die CSS Datei ein, welche wir später noch erstellen. Sie enthält die nötigen Infos für das 100% Layout. Wir haben auf der Seite ein einziges Div, das dann eine dynamische Höhe bekommt: 
Das CSS
html, body { height:100%; margin:0; padding:0; }
#page { background:#FFFF99; border-left:1px solid #FFC999; border-right:1px solid #FFC999; margin:0 100px; min-height:100%; }
In Zeile 1 müssen wir zuerst die Höhe von html und body auf 100% (gesamte Fensterhöhe bzw. Viewport) setzen. Denn das Div ist im body und es soll die Höhe von 100% haben. Wenn body aber nicht eine Höhe von 100% hat, wären die 100% des Divs nur die Höhe des Elternelements body, was dann geringer wäre. In Zeile 2 sagen wir dem Browser, dass dieses Div eine Mindesthöhe (min-height) von 100% haben soll. Außerdem werden hier noch Angaben zur Hintergrundfarbe, den Rahmen und der vertikalen Ausrichtung gemacht. Man beachte, dass wir hier keine konkrete Breitenangabe machen, denn die Webseite soll sich ja an der Breite des Fensters orientieren. Deshalb verwenden wir margin:0 100px, was bedeutet, dass die Webseite rechts und links immer 100px Abstand zum Fensterende hat, egal wie breit dieses ist. Diese Vorgehensweise funktioniert in allen gängigen Browsern, außer im Internet Explorer. Deshalb müssen wir noch ein bisschen weiterarbeiten. Zusätze für den IEZuerst müssen wir noch sehen, ob der Browser der IE ist. Dies machen wir mit einem kleinen Hack in unserer HTML Datei:
<title>100% Layout</title>
<link href="/styles.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="/styles_ie.css" rel="stylesheet" type="text/css">
<!endif-->
</head>
Mit if IE decken wir den Fall ab, dass jemand mit einem "schlechten" Browser unterwegs ist. In diesem Fall liefern wir noch eine zusätzliche CSS-Datei aus - die styles_ie.css. Diese sieht so aus:
* html #page { height:100%; }
Weil der IE min-height nicht kennt, müssen wir es so machen. Somit haben wir ein browserübergreifendes 100% Layout geschaffen, dass überall gleich aussieht.
|
Kommentare