nicht angemeldet
Hallo,
die Höhenangabe mit height: 100% bezieht sich ja immer auf das Elternelement - soweit klar. Nun frage ich mich allerdings, was ich machen kann, wenn ich zusätzlich ein Header-Div mit einer festen Höhe definiere?
Angenommen, ich habe ein Header-Div mit height:200px definiert, und möchte nun darunter ein DIV mit height:100%. Das untere Element nimmt dann die Höhe des Browsers und _zusätzlich_ 200px ein. Gibt es eine Möglichkeit, dass beide DIVs zusammen nicht mehr als die volle Browserhöhe einnehmen?
Nein, das geht _so_ nicht. Zusätzlich zu Deinen Überlegungen kommt nämlich noch erschwerend hinzu, dass die CSS-Angaben height und width die Außmaße des Inhalts der Elemente angeben. Eventuelle margins und border und sogar paddings kommen noch zu den Gesamtausmaßen hinzu. Wenn ein Element also die Höhe von 100% hat und zusätzlich noch margin, border oder padding, dann ist es _dadurch_ schon höher als sein Eleternelement.
Üblicherweise löst man dieses Dilemma so, dass man es nur so aussehen lässt, als würde da zwei Elemente _untereinander_ stehen und insgesamt 100% der Browserfensterhöhe einnehmen. In Wirklichkeit stellt das Eelement, welches das Browserfenster ausfüllt (z.B. body) den Hintergrund dar und die beiden anderen Elemente (#header und #content) liegen in optischen Layern davor. Der #header wird genau positioniert und mit genauen Ausmaßen versehen. Der #content bekommt die Höhe des #header als oberen Abstand und wächst ansonsten einfach mit seinem Inhalt.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Beschreibung der Seite</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
html { margin:0; padding:0; height:100%; }
body { margin:0; padding:0; background-color:#00FFAF; }
#header { position:absolute; top:0; left:0; height:200px; width:100%; background-color:#FF7F7F; }
#header #logo { height:150px; width:200px; float:right; }
#content { padding-top:200px; }
</style>
</head>
<body>
<div id="header">
<img id="logo" src="Beispiel.jpg" alt="Logo"><h1>Seitenüberschrift</h1>
</div>
<div id="content">
<h2>Kapitelüberschrift</h2>
<p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p><p>Lorem ipsum ...</p>
</div>
</body>
</html>
viele Grüße
Axel