André Mantz: Tabelle auf 100% Höhe bringen

Beitrag lesen

Moin zusammen,

folgende Problemstellung: eine Seite hat in vertikaler Anordnung 3 Elemente; einen Kopfbereich mit dem Seitenmenü, einen mittleren Bereich mit dem Inhalt der Seite und einen Fußbereich als Abschluß der Seite. Die drei Blöcke sind als 3 Tabellen ausgelegt.
Die Höhe der ersten und dritten Tabelle sind fix (90px und 22px).
Der mittlere Bereich ist variabel, je nach Inhalt. Soweit kein Problem.
Solange der mittlere Bereich genug Text enthält ist auch alles in Ordnung. Problematisch wird es in zwei Fällen:

  • der mittlere Bereich enthält zuwenig Inhalt, so daß der untere Bereich "mitten in der Seite" hängt. Das sieht einfach unschön aus, beeiträchtigt aber die Funktion nicht
  • der mittlere Bereich kann auch einen IFRAME enthalten, in welchem eine externe Seite angezeigt wird. Und hier wird es wirklich problematisch. Weise ich dem IFRAME keine Höhe zu, dann wird er gerade mal 150px hoch, zu klein für die darzustellende Seite. Weise ich ihm eine fixe Höhe zu, dann kommt es ggf. zu einem doppelten vertikalen Scrollbalken, nämlich wenn das Browserfenster kleiner als die gesamte Seitenhöhe ist. Man kann dann einmal die gesamte Seite und dann nochmal den Inhalt des Frames scrollen.

Hier habe ich mal drei Beispiele abgelegt, so wird vielleicht verständlicher, was ich meine:

Beispiel 1, Layout ohne IFRAME:
http://www.w44.de/tests/test1.html

Beispiel 2, Layout mit IFRAME, IFRAME ohne Höhenangabe:
http://www.w44.de/tests/test2.html

Beispiel 3, Layout mit IFRAME, IFRAME mit fester Höhenangabe (480px):
http://www.w44.de/tests/test3.html

Ist es möglich, die mittlere Tabelle so einzustellen, daß sie zusammen mit dem oberen und unteren Bereich exakt 100% der Fensterhöhe einnehmen? Entsprechende Einstellungen wie style="height:100%" funktionieren nicht, weder im IE noch in Opera oder Firefox.

Nach Möglichkeit sollte auch kein javascript eingesetzt werden.

Gruß, André