nicht angemeldet
Tabelle auf 100% Höhe bringen
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é
-
Hi André,
eigentlich sollten Layouts heutzutage nicht mehr über Tabellen realisiert werden, sondern es sollte mit css basierten Layouts gearbeitet werden.
Aber weil heute Mittwoch ist:
html, body {
height:100%
}
table {
min-height:100%;
height: auto !important;
height: 100%;
}Dann EINE Tabelle mit drei Zeilen und jeweils einer Zelle. Die Zellen oben und unten kriegen ihre fixen Höhen, die mittlere gar keine Angabe.
Für den iframe wirst aber um JS nicht herumkommen. Entweder an die Höhe der mittleren <td> anpassen (vermeidet Scrolling deiner Seite wegen iframe Höhe) oder an die Höhe des zu ladenden Dokuments (vermeidet Scrolling des iframes).
Gruß
Antipitch-
Moin Antipitch,
Aber weil heute Mittwoch ist:
html, body {
height:100%
}
table {
min-height:100%;
height: auto !important;
height: 100%;
}Dann EINE Tabelle mit drei Zeilen und jeweils einer Zelle. Die Zellen oben und unten kriegen ihre fixen Höhen, die mittlere gar keine Angabe.
Nun ist schon Donnerstag, und ich bin beinahe verzweifelt. Habe Deinen Vorschlag ausprobiert, wieder und wieder und wieder ... nix. Es will einfach nicht funktionieren. Zumindest nicht in IE oder FF, nur Opera machts.
Bis ich dann versehentlich die DOCTYPE-Declaration entfernt habe, siehe da: es geht! Nur so will ich das auch wieder nicht, denn ohne DOCTYPE entsteht kein valider HTML-Code.Ich werde es jetzt doch mal versuchen, mittels DIV-Bereichen die ganze Sache aufzubauen.
Gruß, André
-