DIV so gross wie parent DIV

[Mike]

Hallo zusammen,

ich versuche gerade 2 verschachtelte DIVS so gross wie der eignetliche Inhalt hinzukriegen, diese dürfen jedoch nicht weniger hoch wie das Browserfenster sein.
Das mit der Höhe habe ich für das äussere DIV hinbekommen. Nun soll das DIV darin (ein Menü) auch so hoch werden. Leider krieg ich das nicht hin.
Gibt es überhaupt einen Lösungsansatz dafür?

Gruss
Mike

[Gunnar Bittersmann]

@@Mike:

nuqneH

ich versuche gerade 2 verschachtelte DIVS so gross wie der eignetliche Inhalt hinzukriegen, diese dürfen jedoch nicht weniger hoch wie das Browserfenster sein.
Das mit der Höhe habe ich für das äussere DIV hinbekommen. Nun soll das DIV darin (ein Menü) auch so hoch werden. Leider krieg ich das nicht hin.
Gibt es überhaupt einen Lösungsansatz dafür?

html, body  
{  
	height: 100%;  
	margin: 0;  
	padding: 0;  
}  
  
body  
{  
	display: table;  
}  
  
body>div  
{  
	background: yellow;  
	display: table-row;  
	height: 100%;  
}  
  
body>div>div  
{  
	background: red;  
	display: table-cell;  
	height: 100%;  
}

Qapla'

[Mike]

Hallo Gunnar,

danke schonmal für deine Hilfe.
Ich habs ausprobiert, leider funktioniert das ganze so leider nicht. Ich geb dir mal den genauen CSS Code, vielleicht kannst du mir ja nochmals helfen.

  
html  
{  
	width: 100%;  
	overflow:auto;  
}  
	  
body  
{  
	display: table;  
	width: 100%;  
	background: black;  
	margin: 0;  
	padding: 0;  
	height:100%;  
	top: 0px;  
	overflow: auto;  
}  
  
#maincontainer  
{  
	display: table-row;  
	position:absolute;  
	border: solid 1px #666;  
	border-bottom: 0px;  
	border-top: 0px;  
	padding: 0px;  
	padding-bottom: 50px;  
	margin: 0px 0px 0px -500px;  
	width: 1000px;  
	left: 50%;  
	min-height:95%;  
	height:auto;  
	top: 0px;  
	background: #333;  
	background-attachment:fixed;  
	background-position:50% 50%;  
}  
  
#menu_left  
{  
	display: table-cell;  
	margin-right: 35px;	  
	margin-bottom: 0px;  
	padding-top: 30px;  
	padding-left:10px;  
	width: 160px;  
	height: 100%;  
	background: rgba(0, 0, 0, 0.5);  
	border-right: 2px solid grey;  
}

Besten Dank.
Mike

html, body

{
height: 100%;
margin: 0;
padding: 0;
}

body
{
display: table;
}

body>div
{
background: yellow;
display: table-row;
height: 100%;
}

body>div>div
{
background: red;
display: table-cell;
height: 100%;
}

>   
> Qapla'

[Mike]

P.S.:

beim Maincontainer und Menü hab ich jeweils float:left; vergessen.

[Steel]

Hi!

Welchen Browser benutzt Du?

Gunnars Loesung kann z.B. auf einem IE6 nicht funktionieren, weil der das noetige CSS nicht beherrscht.

Dein Problem: Durch das Floaten wird das Element aus dem Elementfluss genommen und kennt die 100% des umgebenden Elements nicht mehr.

Du muesstest faux collumns benutzen. Auch nicht mit aelteren und miesen Browsern kompatiibel ist eine absolute Positionierung mit top und bottom.

[Mike]

Hi

Welchen Browser benutzt Du?

Ich veruche das ganze mit Safari 4 und dem aktuellen FFox.

Gunnars Loesung kann z.B. auf einem IE6 nicht funktionieren, weil der das noetige CSS nicht beherrscht.

Dein Problem: Durch das Floaten wird das Element aus dem Elementfluss genommen und kennt die 100% des umgebenden Elements nicht mehr.

wenn ich das Floaten rausnehmen, dann liegen die Elemente übereinande :-(

Du muesstest faux collumns benutzen. Auch nicht mit aelteren und miesen Browsern kompatiibel ist eine absolute Positionierung mit top und bottom.

Was ist das genau? (sorry...)

[Mike]

Danke Steel,

hab eine Mischlösung gemacht. Hab das rechte Element eifach rechts gefloated und eine faux column gemacht. Das sollte so hinhauen. Ist zwar jetzt nicht das, was ich eigentlich wollte, wird aber den Zweck auch erfüllen ;-)

Danke nochmals.
Gruss
Mike

[Steel]

Hoi!

Also: moederne Browser unterstützen auch das Aufspannen eines Elements, indem man es absolut positiniert und ihm gleichzeitig Top und Bottom Angaben gibt.

display:absolute;
top:0;
bottom:0;

würde z.B. das Element auf die Höhe des Elternelements aufspannen. Der ein oder andere IE User z.B. müsste mit einem nicht 100% hohen Element leben.