nicht angemeldet
2 Divs zusammen 100% hoch - erstes Div mit absoluter Höhe
Hallo,
ich möchte 3 Divs so aufteilen, dass das erste oben 100% der Breite in Anspruch nimmt, aber eine absolute Höhe. Die zwei weiteren Divs sollen darunter den übrigen Platz in Anspruch nehmen, sodass alle drei zusammen das Browserfenster maximal ausnutzen.
Mit float:left und einer absoluten Breitenangabe kann ich das untere linke Div (div2) wunderbar ausrichten, sodass das untere rechte Div (div3) (ohne Breitenangabe) die übrige Breite verwendet.
Genau das gleiche möchte ich mit der Höhe machen - das obere Div (div1) soll sozusagen "float:top" sein, die unteren beiden also den vollen übrigen Platz darunter ausnutzen. Eine Höhe von 100% kann ich denen ja nicht geben, da von den 100% die absolute Höhe des oberen Div (div1) abgezogen werden soll.
Wie kann ich also die div2 und div3 die volle freie Höhe nutzen lassen?
Hier mal ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1;">
</head>
<body>
<div id="div1" style="background-color:#FF0000; height:100px;">
oberes div - maximale breite und absolute höhe
</div>
<div id="div2" style="width:200px; background-color:#00FF00; float:left;">
absolute breite - soll aber die gesamte freie höhe unter div1 ausnutzen
</div>
<div id="div3" style="background-color:#0000FF; color:#FFFFFF;">
soll genauso hoch sein wie div2
</div>
</body>
</html>
-
Wie kann ich also die div2 und div3 die volle freie Höhe nutzen lassen?
positioniere einfach alle 3 Element absolut und gib dabei einen Wert für top _und_ bottom an.
-
Danke für die Antwort, exakt diese Idee hatte ich auch gerade.
Na ja, es funktioniert - ich habe ansich genau das, was ich wollte.
Aber irgendwie kommt mir die absolute Ausrichtung komisch/schlecht/unrichtig vor. Kann ich damit nicht Probleme bekommen?
Hier mein Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1;"> <style type="text/css"> body { width:100%; height:100%; margin:0px; } .div1 { position:absolute; left:0px; top:0px; right:0px; background-color:#FF0000; height:100px; } .div2 { position:absolute; left:0px; top:100px; bottom:0px; width:200px; background-color:#00FF00; float:left; } .div3 { position:absolute; left:200px; top:100px; right:0px; bottom:0px; background-color:#0000FF; color:#FFFFFF; } </style> </head> <body> <div class="div1"> oberes div - maximale breite und absolute höhe </div> <div class="div2"> absolute breite - soll aber die gesamte freie höhe unter div1 ausnutzen </div> <div class="div3"> soll genauso hoch sein wie div2 </div> </body> </html>-
Hi,
Aber irgendwie kommt mir die absolute Ausrichtung komisch/schlecht/unrichtig vor. Kann ich damit nicht Probleme bekommen?
Natürlich, auch kleineren Bildschirmen, die ggf. keinen Zoom anbieten, bekommst du da sicher Probleme mit winzigen „Frames“, bei denen auch erlaubtes Scrolling die Lesbarkeit nicht mehr erhöhen kann.
MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]-
Natürlich, auch kleineren Bildschirmen, die ggf. keinen Zoom anbieten, bekommst du da sicher Probleme mit winzigen „Frames“, bei denen auch erlaubtes Scrolling die Lesbarkeit nicht mehr erhöhen kann.
Da müsste ich ggf. noch mal genauer drüber nachdenken.
Ich habe aber ein anderes Problem. Während mein Code im Feuerfuchs einwandfrei funktioniert, macht der IE wieder nicht mit. Die Werte "right" und "bottom" scheinen komplett ignoriert zu werden. Auch wird div3 in meinem neuen, scrollfähigen Codebeispiel so groß wie der Inhalt, statt sich ans Browserfenster anzupassen.
Siehe:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1;"> <style type="text/css"> body { width:100%; height:100%; margin:0px; } .div1 { position:absolute; left:0px; top:0px; right:0px; background-color:#FF0000; height:100px; } .div2 { position:absolute; left:0px; top:100px; bottom:0px; width:200px; background-color:#00FF00; } .div3 { position:absolute; left:200px; top:100px; right:0px; bottom:0px; background-color:#0000FF; color:#FFFFFF; overflow:scroll; } </style> </head> <body> <div class="div1"> oberes div - maximale breite und absolute höhe </div> <div class="div2"> absolute breite - soll aber die gesamte freie höhe unter div1 ausnutzen </div> <div class="div3"> soll genauso hoch sein wie div2 <br> <img src="bjlijlö" alt="" style="width:50px; height:3000px;"> </div> </body> </html>-
Hi,
Ich habe aber ein anderes Problem. Während mein Code im Feuerfuchs einwandfrei funktioniert, macht der IE wieder nicht mit. Die Werte "right" und "bottom" scheinen komplett ignoriert zu werden.
Das liegt, was IE >= 7 angeht, am Quirks Mode.
Vorherige Versionen kamen damit sowieso nie klar, also musst du dir für die irgendeine Formatierungs-Alternative überlegen, die du ggf. per CSS-Hack einbindest.MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]-
Hi,
ja, das war's. IE7 habe ich zwar gerade nicht am Laufen, aber der IE8 macht's jetzt einwandfrei (siehe Code). War mein Doctype falsch, oder nur ungenau?
Aber wie ich das im IE6 zum Laufen bringen soll, weiß ich nicht. Welche CSS-Hacks meinst du? Ideen?
Hier der Code mit dem "richtigen" Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1;"> <style type="text/css"> body { width:100%; height:100%; margin:0px; } .div1 { position:absolute; left:0px; top:0px; right:0px; background-color:#FF0000; height:100px; } .div2 { position:absolute; left:0px; top:100px; bottom:0px; width:200px; background-color:#00FF00; } .div3 { position:absolute; left:200px; top:100px; right:0px; bottom:0px; background-color:#0000FF; color:#FFFFFF; overflow:scroll; } </style> </head> <body> <div class="div1"> oberes div - maximale breite und absolute höhe </div> <div class="div2"> absolute breite - soll aber die gesamte freie höhe unter div1 ausnutzen </div> <div class="div3"> soll genauso hoch sein wie div2 <br> <img src="bjlijlö" alt="" style="width:50px; height:3000px;"> </div> </body> </html>-
Hi,
ja, das war's. IE7 habe ich zwar gerade nicht am Laufen, aber der IE8 macht's jetzt einwandfrei (siehe Code). War mein Doctype falsch, oder nur ungenau?
Er war einer von denen, die den Quirks Mode auslösen. Liste gibt's bspw. bei der Wikipedia.
Aber wie ich das im IE6 zum Laufen bringen soll, weiß ich nicht. Welche CSS-Hacks meinst du? Ideen?
Ich meine die CSS-Hacks, die dafür sorgen, dass etwas nur vom IE 6 und kleiner interpretiert wird.
Und welche alternative Formatierung du haben willst, wenn der Browser das gewünschte Layout nicht unterstützt, wirst du dir doch wohl selber überlegen können ...?
Bspw. alle drei Container-Elemente im normalen Fluss belassen, und jeweils so hoch, wie es ihr Inhalt erfordert, wäre eine Möglichkeit für ein Fallback-Layout.MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
-
-
-
-
-
-