Lukas: Höhe der Tabellen

Hi Leute,

das Thema bezüglich DOCTYPE und height: 100% wurde ja schon des öfteren diskutiert, aber dennoch finde ich für folgendes Problem keine funktionierende Lösung:

Ich benötige eine Tabelle die sich über die gesamte Browserseite Höhe und Breite) ausbreitet. Diese Tabelle soll 3 weitere Tabellen beinhalten, wobei die erste und letzte eine feste Höhe haben, und die mittlere den Rest automatisch ausfüllen soll. Ohne DOCTYPE funktioniert es einwandfrei. Sobald ich dies aber dazuschreibe, zieht der IE die obere und untere Tabelle auf. Firefox stellt es immer noch richtig da, mit der kleinen Einschränkung, dass plötzlich die Scrollbars erscheinen und trotz 100% nach oben-unten bzw. rechts-links gescrollt werden kann (wenn auch nur 2 Millimeter).

mfg und danke

-------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html style="height: 100%;">

<head>
  <title>Test</title>
</head>

<body style="height: 100%; margin: 0px;">

<table style="width: 100%;
       height: 100%;
       border-width: 10px;
       border-style: solid;
       border-color: blue;
       border-collapse: collapse";>

<tr>
 <td style="height: 60px; background-color: green;">
  <table>
   <tr>
    <td></td>
   <tr>
  </table>
 </td>
</tr>

<tr>
 <td style="background-color: red;">
  <table>
   <tr>
    <td></td>
   <tr>
  </table>
 </td>
</tr>

<tr>
 <td style="height: 60px; background-color: green;">
  <table>
   <tr>
    <td></td>
   <tr>
  </table>
 </td>
</tr>

</table>
</body>
</html>

  1. Hi,

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html style="height: 100%;">

    html hat kein style-Attribut. Style-Zuweisungen für das html-Element müssen per style-Element oder per externer CSS-Ressource erfolgen.

    Welchen Sinn haben 3 leere Tabellen in einer Tabelle? Tabellarische Daten seh ich da nicht, also auch keinen Grund für eine Tabelle (geschweige denn 4 Tabellen).

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. html hat kein style-Attribut. Style-Zuweisungen für das html-Element müssen per style-Element oder per externer CSS-Ressource erfolgen.

      Ich habe hier zur besseren Übersicht die styles eingefügt. Normal liegen diese natürlich in einer externen css Datei.

      Welchen Sinn haben 3 leere Tabellen in einer Tabelle? Tabellarische Daten seh ich da nicht, also auch keinen Grund für eine Tabelle (geschweige denn 4 Tabellen).

      Auch hier wiederrum der Übersicht halber nur leere Tabellen, da ich das Prinzip zeigen wollte. Die hoffentlich irgendwann fertige Seite besitzt natürlich entsprechenden Inhalt. Da die drei Tabellen als Komponenten unabhängig voneinander in unterschiedliche Templates eingefügt werden, ist dieser Aufbau notwendig.

      mfg

  2. Hallo,

    <html style="height: 100%;">

    wie Andreas schon sagte, das stimmt so nicht. Das muss raus.

    <head>
      <title>Test</title>

    <style type="text/css">
         <!--
         html (height:100%;)
         body {height:100%; margin:0px;}
         table.links {height: 100%; border: 10px solid blue; border-collapse: collapse;}
         .links td.gruen {height:60px; background:green;}
         .links td.rot {background:red;}
         -->
         </style>

    </head>

    <body>

    <table class="links">

    <tr>

    <td class="gruen">
     [...]

    </tr>

    <tr>

    <td class="rot">

    <table>
       <tr>

    [...]

    </tr>

    <tr>

    <td class="gruen">

    <table>

    [...]

    </html>

    Die Übersicht erhebt nicht den Anspruch auf Vollständigkeit. ;-)

    Mit freundlichen Grüßen

    André

    1. Hi,

      <style type="text/css">
           <!--
           html (height:100%;)
           body {height:100%; margin:0px;}
           table.links {height: 100%; border: 10px solid blue; border-collapse: collapse;}
           .links td.gruen {height:60px; background:green;}
           .links td.rot {background:red;}
           -->
           </style>

      Die Verwendung eines separaten style-tags hat dazu geführt, daß die Angaben für das body-tag ingnoriert werden. Wie bereits erwähnt stehen die styles normalerweise in einer externen Datei. Mein eigentliches Problem - daß die mittlere Tabelle (bzw. die mittlere Zeile der äusseren Tabelle - nicht den verbleibenden Platz ausfüllt, bleibt nach wie vor bestehen.

      mfg

  3. Hi,

    Firefox stellt es immer noch richtig da, mit der kleinen Einschränkung, dass plötzlich die Scrollbars erscheinen und trotz 100% nach oben-unten bzw. rechts-links gescrollt werden kann (wenn auch nur 2 Millimeter).

    Was erwartest Du denn, wenn zu den 100% je nach Browser noch ein padding für body gesetzt wird und Du dann auch noch

    border-width: 10px;

    definierst?

    freundliche Grüße
    Ingo

    1. Hi,

      Was erwartest Du denn, wenn zu den 100% je nach Browser noch ein padding für body gesetzt wird und Du dann auch noch

      border-width: 10px;
      definierst?

      vielen Dank für den Tipp. Firefox addiert tatsächlich die Breite des Rahmens auf die 100% auf. Aber welches padding im body meintest Du?

      mfg

      1. Hi,

        Aber welches padding im body meintest Du?

        Du weißt, daß Browser für diverse Elemente (teilweise unterschiedliche) Voreinstellungen hsben?
        So könnte für html und/oder body auch ein padding gesetzt sein.

        freundliche Grüße
        Ingo