RomanD: Tabelle über gesamte Höhe

Hi,

Ich habe eine Tabelle, die aus 3 Zeilen besteht und über die gesamte Höhe gehen soll. Die obere und die untere Zeile sollen eine feste Höhe haben, die mittlere Zeile soll den Rest nehmen.
Im FF, Opera,NS usw. geht das, nur im IE mal wieder nicht ;)

Hier der Code:

<div style='height:100%'>
<table border="0" style="height:100%" width="100%" cellpadding="0" cellspacing="0">
  <tr style="height:120px">
    <td style="height:120px">Inhalt Obere Zeile</td>
  </tr>
  <tr>
    <td>Inhalt Mitte</td>
  </tr>
  <tr style="height:35px">
    <td style="height:35px">Inhalt untere Zeile</td>
  </tr>
</table>
</div>

Das Problem beim IE ist, dass die mittlere Zeile so hoch wie der Inhalt ist, und die restliche Höhe kommt dann in die untere Zeile (also nicht nur die 35px, sondern mehr).

Wie bekomme ich das hin, dass das im IE auch funktioniert?

Gruß

  1. Mir ist grad aufgefallen, dass der Fehler nicht an der Tabelle liegt, sondern am div-Container. Dieser ist nicht 100% hoch, sondern nur so hoch wie der Inhalt der Tabelle.

    1. Hi,

      Mir ist grad aufgefallen, dass der Fehler nicht an der Tabelle liegt, sondern am div-Container. Dieser ist nicht 100% hoch, sondern nur so hoch wie der Inhalt der Tabelle.

      Zum x-ten Mal:

      Hoehenangaben in Prozent beziehen sich in CSS auf die Hoehe der Vorfahrenelemente.
      Also gebe auch diese an (fuer _alle_ Vorfahrenelemente), wenn du 100% Hoehe willst.

      MfG ChrisB

      1. Ja das weis ich. Der div-Container mit der Tabelle kommt sofort nach dem Body-Tag, es gibt also keine Vorfahrenelemente.
        Ich hab auch schon
        <body style="height:100%">
        probiert.

        Im FF, Opera usw. funktioniert das ja auch.

        1. Hi,

          Ja das weis ich. Der div-Container mit der Tabelle kommt sofort nach dem Body-Tag, es gibt also keine Vorfahrenelemente.

          Natuerlich ist Body Vorfahrenelement des Divs.

          Ich hab auch schon
          <body style="height:100%">
          probiert.

          Es war von _allen_ Vorfahrenelementen die Rede, nicht nur vom erstbesten, dass du finden kannst.

          MfG ChrisB

          1. <html style="height:100%">
            ändert auch nichts daran.

            1. Hi,

              <html style="height:100%">
              ändert auch nichts daran.

              html kennt kein style-Attribut.

              MfG ChrisB

  2. Hi,

    Ich habe eine Tabelle, die aus 3 Zeilen besteht und über die gesamte Höhe gehen soll. Die obere und die untere Zeile sollen eine feste Höhe haben, die mittlere Zeile soll den Rest nehmen.
    Im FF, Opera,NS usw. geht das, nur im IE mal wieder nicht ;)

    Dieser Quellcode:

    <html>
    <head>
    <link rel="stylesheet" type="text/css" media="screen" href="test.css">
    <title>100% Höhe</title>
    </head>
    <body>
    <div id="box"></div>
    </body>
    </html>

    und dieses CSS:

    html, body{
    margin:0px;
    padding:0px;
    text-align:center;
    height:100%;
    min-height:100%;
    }

    #box{
    width:20em;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
    background-color: #202020;
    min-height:100%;
    height:auto !important;
    height:100%;
    }

    ergeben eine Box mit 100% Höhe (auch im IE, mindestens im IE 6.0.29x)

    Gruß
    mati