Tabellenhöhe anpassen bei kleinerer Auflösung(kein JavaScript!)

[Palme]

Hallo,

ich habe eine Tabelle definiert, welche sich in der Breite der Bildschirmauflösung bzw. der Browserfenstergröße anpasst, und zwar insofern, dass immer der gleich Abstand zwischen Tabelle und Browserfenster bleibt (margin-left und ,argin-right:auto).

Soweit ist das ja kein Problem.
Aber wie löse ich dies bei der Tabellenhöhe?

OK, ich kann eine Tabelle in eine Tabelle legen, und der aüßerern Tabelle ein vertical-align:middle verpassen, und in der Höhe ein width:100%.

Dies stellen der auch richtig (wie gewollt) dar, aber der Mozilla u. der IE dafür nicht.

Außerdem ist bei einer Auflösung von bspw. 1024x768 dann der obere und untere Rand zu groß, eben dieser soll sich ebenfall anpassen, d.h. so, dass bei einer niedrigen Auflösung der obere Rand fast oder ganz verschwindet, und bei einer größeren Auflösung die Ränder nicht allzu groß sind, so dass der Inhalt immer noch komplett sichtbar bleibt.

Hoffentlich versteht jemand, wie ich dass meine.

xxxxxxxxxxxxxxxxxxxxxx
x                    x
x  yyyyyyyyyyyyyyy   x
x  y             y   x
x  y             y   x
x  y             y   x
x  yyyyyyyyyyyyyyy   x
x                    x
xxxxxxxxxxxxxxxxxxxxxx

x = Browserfensterrand
y = Tabellenrand

Egal bei welcher Auflösung, der Inhalt in der Tabelle bzw. die Tabelle soll immer so komplett sichtbar bleiben, ohne dass bei einer höheren AUflösung der Rand oben und unten viel größer werden, eben so, wie bei margin-left u. margin-right:auto.

Grüße

Palme

[Marco]

Hallo,

das ist auch in etwas das, was ich selbst suche.
Habe eine Tabelle mit fester breite am linken Fensterrand ausgerichtet.
Jetzt enhält aber jede einzelne Seite unterschiedlich viele Informationen sodaß ich bei wenig Text oder einen sehr großen Auflösung am unteren Rand noch eine weiße Fläche habe.
Wie schaffe ich es, das mindestens der verfügbare Platz im Browser-Fenster in voller Höhe genutzt wird.
Also, wenn meine anzuzeigenden Informationen 500 Pixel hoch sind, das Anzeigefenster aber 600 Pixeln ist, soll die Tabelle zusätzlich um die fehlenden 100 Pixel erweitert werden. Ist aber die Informatioen 800 Pixel hoch, soll natürlich nicht erweitert werden.

Marco

[Schuer]

Hallo,

Also, wenn meine anzuzeigenden Informationen 500 Pixel hoch sind, das Anzeigefenster aber 600 Pixeln ist, soll die Tabelle zusätzlich um die fehlenden 100 Pixel erweitert werden. Ist aber die Informatioen 800 Pixel hoch, soll natürlich nicht erweitert werden.

vielleicht verstehe ich das Problem nicht ganz, aber funktioniert ein einfaches

<table style="height:100%">...</table>

für sowas nicht?

Gruß,
_Dirk

[Marco]

vielleicht verstehe ich das Problem nicht ganz, aber funktioniert ein einfaches

<table style="height:100%">...</table>

für sowas nicht?

Hallo,

nein es passiert garnichts. Außerdem kann es sein, das einmal auf mehr Informationen auf der Seite angezeigt werden sollen als auf die Seite direkt draufpassen. Ich weiß nicht wie es da mit 100% aussieht, bzw. wie es bei den einzelnen Browsern interpretiert wird.

[Schuer]

Hallo,

nein es passiert garnichts.

Ok, anhand dieser sehr guten Fehlerbeschreibung würde ich sagen: Wende dich am besten an den Microsoft-Support. Die wissen dort immer sehr gut, wie man am besten nicht hilft.

Ich weiß nicht wie es da mit 100% aussieht, bzw. wie es bei den einzelnen Browsern interpretiert wird.

Du könntest es testen und feststellen, dass sich die Tabelle so verhält, wie du es wünschst: 100% Höhe bei wenig Inhalt, entsprechende Streckung bei mehr Inhalt.

Gruß,
_Dirk

[Schuer]

Hallo,

vertical-align:middle

heisst es nicht vertical-align:center; ?
                               ^^^^^^

Dies stellen der auch richtig (wie gewollt) dar, aber der Mozilla u. der IE dafür nicht.

<table style="height:100%">...</table>  sollten sowohl der IE als auch Mozilla ordentlich darstellen.

Gruß,
_Dirk

[molily]

Hi Dirk,

vertical-align:middle

heisst es nicht vertical-align:center; ?
                               ^^^^^^

»middle« ist schon richtig. Wird aber immer gerne verwechselt (ich muss von Zeit zu Zeit auch nachschlagen).

http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align
http://selfhtml.teamone.de/css/eigenschaften/ausrichtung.htm#vertical_align

Mathias

[molily]

Hallo Palme,

OK, ich kann eine Tabelle in eine Tabelle legen, und der aüßerern Tabelle ein vertical-align:middle verpassen, und in der Höhe ein width:100%.

Das sollte gehen. Dennoch sind solche verschachtelten Tabellenkonstrukte nicht das Wahre.

Dies stellen der auch richtig (wie gewollt) dar, aber der Mozilla u. der IE dafür nicht.

Was genau stellen sie dar und was exakt funktioniert nicht? Kannst du eine Beispielseite machen?

Hast du beachtet, dass du auch html und body height:100% geben musst?

Ein Beispiel:

html,body {margin:0; padding:0; height:100%;}
#aussen {height:100%; width:100%; border:1px solid blue;}
#aussen td {padding:0; vertical-align:middle;}
#innen {width:650px; margin-left:auto; margin-right:auto; border:1px solid red;}

<table id="aussen">
<tr>
<td>
 <table id="innen">
 <tr>
 <td>Lorem ipsum dolor sit amet, ...</td>
 <td>Lorem ipsum dolor sit amet, ...</td>
 </tr>
 </table>
</td>
</tr>
</table>

Dasselbe sollte auch mit CSS gehen, gruppierende div-Elemente mit display:table bzw. display:table-cell beispielsweise. Vielleicht hilft diesbezüglich </archiv/2001/11/29/>.

Mathias