Marcus Klemm: DIV mit dynamischer Höhe ohne height:100% erzeugen

Hi,

Ich habe folgendes Problem:
Ich möchte am linken Seitenrand eine Box haben, die immer 0px vom oberen und unteren Rand entfernt ist, d.h. so hoch ist wie der Darstellungsbereich.

Aufgrund des Layouts möchte ich auf die CSS-Eigenschaft "height:100%;" verzichten, da ich dann DIV's ohne Ende verschachteln müßte (die will ich später noch ausblendbar machen, zwecks Druckansicht).

Folgender Beispiel-Code erfüllt die Aufgabe in Phoenix (und deshalb vermutlich auch in anderen Gecko-Browsern) perfekt. Leider aber auch nur da. Zumindest KHTML (Konqueror) und IE 5.0 versagen dabei. Gibt es ein Workaround? oder komme ich um die Verschachtelung vieler DIV's nicht herum?

--- Beginn Beispiel-Code ---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<HTML style="height:100%;margin:0px;">
<HEAD>
<title>Test-Seite</title>
</HEAD>

<BODY style="height:100%;margin:0px;">

<div style="position:absolute;top:0px;bottom:0px;left:0px;width:200px;background-color:red;"></div>

</BODY>
</HTML>

--- Ende Beispiel-Code ---

Vielen Dank schon im Voraus

Ciao, Marcus

  1. Aufgrund des Layouts möchte ich auf die CSS-Eigenschaft "height:100%;" verzichten, da ich dann DIV's ohne Ende verschachteln müßte (die will ich später noch ausblendbar machen, zwecks Druckansicht).

    ...

    <div style="position:absolute;top:0px;bottom:0px;left:0px;width:200px;background-color:red;"></div>

    Hi Marcus,

    ich bin mir nicht wirklich sicher, ob es funktioniert oder in deinem Fall vom Einbau her möglich ist, aber hast Du schonmal versucht, einfach ein <table height='100%'> in deinen <div>-Tag einzubauen?
    Das könnte deine Box u.U. auf die volle Höhe strecken...

    greetz,
    Tobi