|
|||
DIV: Höhe soll sich automatisch anderen DIV anpassen
Hallo allerseits,
ich habe folgendes Problem mit einem CSS-Layout: Anschauen könnt ihr euch das Problem hier: Seite: http://www.quarz.cc/TEST/ CSS: http://www.quarz.cc/TEST/main.css Ich hätte gerne, dass sich die Höhe des DIV-Tags "container" (weiss) dem höchsten darin enthaltenen Element anpasst. In diesem Falle wäre dies das DIV "content". Dem DIV "bottom_right" habe ich als height-attribut 100% zugewiesen und hätte erwartet, dass es sich dem container-tag anpasst, da es ja von diesem umschlossen wird, doch dies scheint nicht der Fall zu sein. Sind meine "Anforderungen" überhaupt möglich? Falls ja, wie erreiche ich das oben Gewünschte? Gruss und Vielen Dank Geändert von OnTheRun (24.09.2006 um 19:52 Uhr) |
Sponsored Links |
|
||||
Steht auch alles im FAQ ...
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
||||
Nun rate mal, wozu das FAQ bei uns hier eingerichtet wurde?
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
||||
... oder um nicht ständig auf die gleichen Fragen antworten zu müssen?
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
|||
Hallo,
vielen Dank für eure Antworten EDIT2: Ok, ich habe nun durch Weglassen des height-Attributes bei container und container-right, so wie der Verwendung von min-height das gewünschte Resultat erhalten. Nun fehlt nur noch eines und zwar, dass sich middle_right_02 container_right anpasst. Dies tut es aber nicht. Container_right sieht wie folgt aus: Code:
#container_right { background-color: #00FF00; width: 624px; min-height: 400px; float: left; } Code:
#middle_right_02 { background-color: #006666; width: 200px; height: 100%; float: right; } EDIT: Ich bin noch auf ein weiteres Problem gestossen: Ich habe content mal eine Höhe von 800px zugwiesen, somit ist er grösser als container. Dies wäre ok, nur sollte sich container ausdehnen und somit gleichhoch werden wie content (oben genanntes Problem). Das zweite Problem ist, dass wenn ich container_right keine Höhe gebe, dehnt er sich und passt sich der Höhe von content an. Dies ist ok so. Nun hätte ich aber gerne dass middle_right_02 (content, middle_right_01 und middle_right_02 liegen alle in container_right) sich dem container_right anpasst (und somit content). Ich habe dies per height: 100% versucht, doch dies nützt nichts, da ja der übergeordnete Container (container_right) keine Höhenangabe hat und sich der Höhe von content anpasst. Somit ist middle_right_02 so hoch wie sein Inhalt (momentan  . Er sollte sich aber per height 100% dem übergeordneten Container in der Höhe (und somit content) anpassen. Wie bewerkstellige ich dies? Ich habe vorher (recht ausgiebig) bei Google und hier im Forum (wenig ausgiebig ) gesucht und bin auf die im FAQ genannte Seite schon gestossen. Ich habe dies mit dem clearfix bereits probiert, leider ohne Erfolg. Im besagten Artikel wird ja auch beschrieben, dass die "alte" Variante ein Code:
<div style="clear: both;"></div> Ich habe heute ein wenig daran rumgebastelt und das Layout sieht nun so aus: Seite: http://www.quarz.cc/TEST/ CSS: http://www.quarz.cc/TEST/main.css Was ich nicht ganz verstehe ist Folgendes: Ich habe beispielsweise jetzt einen zusätzlichen Container (container_right) eingebaut. Dieser hat height 100%. Firefox interpretiert dies korrekt und macht mir eine Höhe von 768px daraus, da der übergeordnete Container (container) eine solche Höhe besitzt. Was mich allerdings stört ist, dass container_right über den Rand von container herausragt. Ich hätte gern, dass die Höhe von container_right im Prinzip 100%(768px) - top3.height (200px) beträgt, dann wäre das wiederum korrekt. Die andere Lösung wäre eben, wie schon erwähnt der Clearfix. IE 6 macht (fälschlicherweise) das von mir gewünschte Ergebnis, er stretcht container auf die Gesamthöhe (container_right + top3), also 968px. Wie kriege ich dies hin? Ich habe es wie gesagt mit clearfix und clear: both probiert: Code:
<div id="container"> <div id="top1"> </div> <div id="top2"> </div> <div id="top3"> </div> <div id="menu"> </div> <div id="container_right"> <div id="content"> </div> <div id="middle_right_01"> </div> <div id="middle_right_02"> </div> </div> <div id="bottom_left"> </div> <div id="bottom_right"> </div> <div style="clear: both"> </div> </div> Code:
<div id="container" class="clearfix"> <div id="top1"> </div> <div id="top2"> </div> <div id="top3"> </div> <div id="menu"> </div> <div id="container_right"> <div id="content"> </div> <div id="middle_right_01"> </div> <div id="middle_right_02"> </div> </div> <div id="bottom_left"> </div> <div id="bottom_right"> </div> </div> Code:
<style> .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Holly Hack Targets IE Win only \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End Holly Hack */ </style> Vielen Dank und Gruss Geändert von OnTheRun (25.09.2006 um 19:00 Uhr) |
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 16:53 |
IE soll width von div bei übergroßem inhalt NICHT automatisch anpassen. Wie? | *vivian | CSS | 4 | 15.09.2008 00:42 |
Div in der Höhe anpassen | cb01 | CSS | 2 | 15.03.2007 03:41 |
div höhe anpassen | Dgx | CSS | 3 | 02.03.2007 18:02 |
DIV Länge automatisch anpassen | judicious | CSS | 10 | 08.05.2006 16:30 |