height:100% und Opera

[Thomas J.]

Moin allerseits

Ich habe ein Problem mit folgender Konstruktion:
+---------------------+
|+--+                 |
||  | Container       |
||1 |                 |
||  | +-------------+ |
||  | |   Inhalt    | |
||  | |             | |
||  | |             | |
||  | |             | |
||  | |             | |
||  | |             | |
||  | |             | |
||  | |             | |
|+--+ +-------------+ |
+---------------------+

Der Container und der linke Bereich (1) sind absolut positioniert, wobei "1" nur ein Hintergrundbild erhält.
Der Container hat keine feste Höhe, sondern "wächst" mit dem Inhalt von "Inhalt". "1" ist u.a. mit height:100% definiert und sollte sich damit der Höhe des Containers anpassen (zumindest laut W3C).

Das klappt mit Mozilla wunderbar. Der IE macht "1" etwas länger, weil er mal wieder die padding-Angabe von "Inhalt" nach innen statt nach außen rechnet, aber damit kann ich leben.

Mit Opera jedoch habe ich ein echtes Problem. Wenn ich testweise dem Container ein feste Höhenangabe spendiere, klappt alles bestens. Ohne Höhenangabe jedoch macht Opera "1" exakt so hoch wie das Browserfester. Das sieht bei längerem Inhalt natürlich ziemlich blöd aus, wenn das Hintergrundbild plötzlich mitten auf der Seite aufhört.

Ich habe lange über einen Workaround gegrübelt. Das einzige, was mir eingefallen ist, ist den Container z.B. mit height:1000% zu definieren. Dann ist die Seite eben endlos lang - eine Notlösung halt.

Hat eventuell jemand eine Idee, ob bzw. wie ich dieses Problem eleganter lösen könnte?

Schönen Dank schonmal.
Thomas J.

[Rene Grassegger]

Hallo Thomas,

ich hätte vielleicht ne Idee zum Ausprobieren für dich, aber ich würde Sie als (nicht getesteten) schmutzigen Trick/Gedanken bezeichnen.

+----------------------+
|+---+                 |
|| 1 |                 |
||++ | Container       |
|||| |                 |
|||| | +-------------+ |
|||| | |   Inhalt    | |
|||| | |             | |
|||| | |             | |
|||| | |             | |
|||| | |             | |
|||| | |             | |
|||| | |             | |
||++ | |             | |
|+---+ +-------------+ |
+----------------------+

Vielleicht würde es helfen eine 1 px breite Tabelle am Rand des 1er Containers zu machen, die 100% hoch ist. Die meisten Browser können ein solches Unding darstellen.

Ich habe mal ein paar Quellen zusammengesucht, wo du vielleicht ein paar konkretere Lösungen findest:

http://barrierefrei.e-workers.de/
http://www.thenoodleincident.com/tutorials/box_lesson/index.html
http://www.glish.com/css/

mfg Rene