Gestaltung des Layouts mit display: und prozentangaben

[Der Martin]

Hi,

Damit bei Containern wie div height-Angaben [in Prozent] wirken, muss mindestens ein umgebendes Element eine height-Angabe in einer anderen Einheit als Prozent enthalten.

diese Aussage ist in mehreren Punkten falsch. Und damit meine ich nicht, dass du nur von prozentualen height-Angaben sprichst; das habe ich im Zitat mal ergänzt.

Natürlich ist der eindeutigste Fall der, dass das Elternelement des Containers eine feste Höhenangabe hat, etwa in px oder in em. Es genügt aber auch, wenn die Kette aller Vorfahrenelemente eine relative Höhenangabe haben, wobei die Ergebnisse dann oft schwierig zu überblicken sind. Ein typischer Fall ist die Hierarchie html>body>div, wo die typische Lösung darin besteht, body und html ebenfalls auf eine Höhe von 100% zu setzen.
Alternativ gibt man die Höhe des div-Elements in vh an, das sind dann unmittelbar Prozent der Höhe des Browserfensters. Dann ist die Kette der Vorfahrenelemente egal.

Das können auch html oder body sein. Wobei dann deren Flexibilität eingeschränkt wird.

Inwiefern eingeschränkt?

Um die Flexibilität von html und body zu erhalten habe ich deshalb bei meinem Beispiel ein div.wrapper eingefügt, dem eine Höhe von 100vh und einen grünen Rahmen gegeben.

Das ist überflüssig.

So long,
 Martin