nicht angemeldet
Problem mit DIV height:100% und Header
Hallo zusammen,
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?
Vielen Dank im Voraus!
Andreas
-
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
-
Hallo Axel,
Vielen, vielen, vielen Dank für Deine Hilfe!
Über den Trick mit der absoluten Positionierung und dem Padding habe ich auch schon nachgedacht. Allerdings stellt sich damit das Problem der horizontalen Zentrierung der beiden DIVs...
Gibt es dafür auch eine Lösung?Viele Grüße,
AndreasHallo,
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-
Hallo,
Vielen, vielen, vielen Dank für Deine Hilfe!
Über den Trick mit der absoluten Positionierung und dem Padding habe ich auch schon nachgedacht. Allerdings stellt sich damit das Problem der horizontalen Zentrierung der beiden DIVs...
Gibt es dafür auch eine Lösung?Da kommt es darauf an, was links und rechts von den horizontal zentrierten Elementen zu sehen sein soll und was die Höhe des Browserfensters füllen soll. Grundsätzlich gilt:
Elemente im normalen Fluss lassen sich horizontal zentrieren, indem man ihnen eine Breite < 100% des Elternelements und margin:auto gibt. In meinem Beispiel:
body { margin:0; padding:0; background-color:#00FFAF; width:800px; margin:auto; }Absolut positionierte Elemente lassen sich _unschön_ horizontal zentriert positionieren, indem man ihnen eine Breite < 100% des Elements gibt an dem sie sich orientieren, sie an left:50% positioniert und mit margin-left:-[halbeBreite] zurechtrückt. Das führt allerdings unschönerweise dann dazu, dass bei schmalen Fensterbreiten der #header unerreichbar nach rechts aus dem Fenster herausrutscht. Besser ist es deshalb, dem absolut positionierten Element ein besseres Element zuzuweisen, an dem sie sich orientieren. Solche Elemente sind Elernelemente mit position ungleich static. In meinem Beispiel könnte das body sein.
body { margin:0; padding:0; background-color:#00FFAF; width:800px; margin:auto; position:relative; }
Nun orientiert sich #header an body und am CSS von #header muss nichts mehr geändert werden.Allerdings: Gib mal dem html-Element eine Hintergrundfarbe und nimm einige Zeilen Inhalt aus dem #content raus. Dann siehst Du, wie weit body wirklich nach unten reicht. So richtig hilft da _alleine_ dann aber auch height:100% für body nicht. Denn wenn #content höher als 100% Fensterhöhe wird, fließt #content dann natürlich aus den body mit height:100% raus. Abhilfe brigt hier dann, dem #content den selben Hintergrund zu geben, wie body.
viele Grüße
Axel
-
Hallo,
...Das führt allerdings unschönerweise dann dazu, dass bei schmalen Fensterbreiten der #header unerreichbar nach rechts aus dem Fenster herausrutscht.
... nach links natürlich ;-)
viele Grüße
Axel
-
Axel,
Besten Dank nochmals! Nach einigem Probieren habe ich es hinbekommen.
Bei alle Liebe zum tabellenlosen Layout, aber manchmal ist der Preis einfach zu hoch - gemessen in Zeit und Komplexität...
Viele Grüße,
AndreasHallo,
...Das führt allerdings unschönerweise dann dazu, dass bei schmalen Fensterbreiten der #header unerreichbar nach rechts aus dem Fenster herausrutscht.
... nach links natürlich ;-)viele Grüße
Axel
-
-
-
-