Dynamische Höhe 100% okay.. aber verschachtelt?

[Ralf Heumann]

Hallo,

Ich soll eine Website bauen, an welcher sich unser Designer wieder mal ausgetobt hat.. Daher das altbekannte Problem mit der 100% Höhe von Webseiten.

Es gibt ja die Möglichkeit eine Website auf 100% strecken zu lassen, indem man dem HTML- bzw. dem Body Element dementsprechend die Eigenschaften (height usw.) zuweist. Daraus folgt, dass ich ein Div-Element (in diesem Fall mit der ID "container") auf 100% Höhe strecken kann.

Das habe ich auf http://www.janus-wa.de/layouts/testcase/ bereits getan und funktioniert auch im IE und im Fx ganz gut.

Zur Orientierung:
Blau = BODY
Dunkelrot = <div id="container">
Weiß = <div id="content">

So weit sogut - aber warum kann ich dieses Schema nicht einfach weiterführen und das "content"-Div nicht ebenfalls auf 100% bringen? Im IE wird es (leider) so dargestellt wie ich es mir vorstelle - der Fx streckt das Content-Element allerdings nicht auf 100%

Gibt es überhaupt eine Möglichkeit, dass ich die 2 äußersten verschachtelten Divs auf 100% Höhe bekomme?

Vielen Dank schonmal vorab und viele Grüße,

Ralf

[MudGuard]

Hi,

Dunkelrot = <div id="container">
Weiß = <div id="content">

So weit sogut - aber warum kann ich dieses Schema nicht einfach weiterführen und das "content"-Div nicht ebenfalls auf 100% bringen? Im IE wird es (leider) so dargestellt wie ich es mir vorstelle - der Fx streckt das Content-Element allerdings nicht auf 100%

content hat eine min-height-Angabe in %. Diese Prozentangabe bezieht sich auf die Höhe des umgebenden Blocks (was in diesem Fall das Elternelement ist).
Dieses hat keine explizite Höhenangabe. Und in diesem Fall gilt, daß Prozentwerte bei min-height als 0 betrachtet werden. Die Höhe von content wird also alleine durch den Inhalt bestimmt.
Siehe http://www.w3.org/TR/CSS21/visudet.html#propdef-min-height

cu,
Andreas