dynamische Höhe von divs

Status
Nicht offen für weitere Antworten.
S

sirina

Mitglied
Hallo Forum,

ich beschäftige mich seit einiger Zeit mit Divs und steh auch schon seit genauso langer Zeit vor einem Problem, dass ich einfach nicht in den Griff bekomme.

Folgender Sachverhalt liegt vor:
Ich habe zwei divs
Der Inhalt im ersten div ist kürzer, als der Inhalt im zweiten div.
beide divs haben eine blaue hintergrundfarbe
der Hintergrund der ganzen Seite ist weiß

Nun soll es so sein, dass das erste div sich in seiner Höhe dem zweiten Div anpasst - das heißt, es wächst mit.

Mit Table-Layout wäre das ganz einfach umzusetzen - aber das geht in meinem Fall nicht.
Ich habe schon so ziemlich alles ausprobiert - ohne Erfolg. Aber es muss doch möglich sein, dass die divs in ihrer Höhe dynamisch sind!

HTML: 
<html>
    <head>
        <title>Eine dynamische Höhe von 100%</title>
    </head>
    <style type="text/css">
        html, body { 
					margin: 0;
					padding: 0;
					background-color: #FFFFFF;
					height: 100%;
				}
        div { 
					float: left; 
					width: 15.6em;
					margin: 0; 
					padding: 0;
					position: absolute; 
					top: 14em;
					background-color: #deebf5;
					height: 100%;
				}
        div#zwei{
					width: 15.6em;
					margin: 0; 
					padding: 0;
					position: absolute; 
					top: 14em;
					left: 30em;
					background-color: #deebf5;
					height: 100%;
				}
        body > div { 
					height:auto; 
					min-height:100%; 
				}
    </style>
    <body>
        <div>
            huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
				<div id="zwei">
            huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu v
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu v
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu v
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu v
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu
            huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu v
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu v
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu
            huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
						huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu huhu 
        </div>
					
				</div>
    </body>
</html>

Kann mir jemand helfen? Hat jemand eine Idee oder stand schon vor dem selben Problem
Ich hab schon Selfhtml durch und auch gegooglet wie ne Irre ;)

Danke schonmal im Voraus!

Liebe Grüße
 
Vielen Dank für den Link! Nach einigem hin und her hab ich aber leider feststellen müssen, dass es nicht ganz das ist, was ich suche.

Ich hab hier nochmal einen Quellcode, der hoffentlich besser verdeutlicht, was ich meine:
HTML: 
<html>
	<head>
		<style type="text/css">
			body{
				background-color: #EEEEEE;
			}
			
			#mid-section { 
				position:relative; 
				left:0; 
				top:0; 
			}
			#mid-col-1 { 
				position:absolute; 
				top:0; 
				left:0; 
				width:20%;
			} 
			#mid-col-2 { 
				position:relative; 
				top:0; 
				left:20%; 
				width:40%; 
			} 
			#mid-col-3 { 
				position:absolute; 
				top:0; 
				left:60%; 
				width:20%;
			}
		</style>
	</head>
	<div id="mid-section" style="border: 1px solid green;">  
		<div id="mid-col-1" style="background-color: green; height: 100%;">  
			2.1 Inhalte hier 
		</div>
		<div id="mid-col-2" style="border-left: 5px solid #FFFFFF; background-color: blue;">
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
			2.2 Inhalte hier2.2 Inhalte hier2.2 Inhalte hier
		</div>  
		<div id="mid-col-3" style="border-left: 5px solid #FFFFFF; background-color: brown; height: 100%;">  
			2.3 Inhalte hier 
		</div>
	</div> 
	</body>
</html>

Ich möchte nun, dass die erste und die dritte Spalte im IE (im FF funktioniert das tadellos) genauso lang sind, wie der Content in der Mitte. Anhand des gesetzten Borders kann man das ganz gut erkennen, denke ich.
Andersrum soll es aber auch funktionieren, dass heißt, wenn im mittleren Contentbereich nur wenig Text steht, dafür aber in der dritten Spalte sehr viel, soll der Bereich in der Mitte entsprechend nach unten wachsen.

Vielen Dank schonmal im Voraus!

Mfg, sirina
 
Danke für den Tip. Doch leider kann ich auf die Technologie mit den Bordern nicht zurückgreifen. Die Designvorlage lässt dies leider nicht zu, da ich im Grunde 5 Spalten habe und nicht zwei. Des Weiteren beseitigt die Lösung mit den Bordern (die ich ansonsten sehr gut finde) mein Problem mit kurzem Inhaltstext und langer Navigation nicht.

Trotzdem nochmal vielen Dank!
Ich werd mir wohl was anderes einfallen lassen müssen!
Oder hat sonst noch jemand eine Idee?
 
Hallo Sirina,

nun bin ich verwirrt oben schreibst Du von 3 Spalten. Jetzt von 5 bzw 2 Spalten könntest Du es etwas näher erklären?

LG Eva
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück