# Doctype und Tabelle "height:100%" vertragen sich nicht



## SetoKaiba (16. Januar 2005)

Hallo zusammen!

Ich habe ein kleines Problem auf meiner Seite und komme einfach nicht mehr weiter.

Die Seite ist so aufgebaut, dass links das Menü steht und rechts der Inhalt.
Das Menü soll immer über die ganze Seite gehen, dass heisst auch wenn der Inhalt der Seite nur halb so gross ist, wie es das Platzangebot zulässt, soll dass Menü immer bis zum unteren Rand der Seite gehen.
An sich ist das ja kein Problem:


```
<html>
<head><title>titel</title></head>
<body>
<table style="width: 100%; height:100%;>
<tr>
<td id="menu" style="width:150px; height: 100%; background: blue;">
Menü
</td>
<td id="content" style="height:100%">
Inhalt
</td>
</tr>
</body>
</html>
```

Aus Gründen der Übersichtlichkeit habe ich Dinge wie "style='margin:0px;padding:0px'" weg gelassen.

Das Ergebnis ist so, wie man es erwartet.
Die ersten 150 Pixel (von links nach rechts) sind von oben bis unten blau eingefärbt.
Füge ich aber nun einen DocType hinzu, wird die Tabelle direkt unter "Menü" agbeschnitten. Das heisst, die Tabellenhöhe zieht sich nicht mehr über die gesamte Seite, sondern die Tabelle ist gerade nur noch so hoch, wie es der Inhalt der Tabelle erfordert.
Ich hab' auch schon die verschiedenen DocTypes ausprobiert (strict, transitional), nur leider brachte auch das keine Änderung!

Falls es noch nicht deutlich geworden ist, worin genau mein Problem liegt, hier noch zwei Bilder (nur Ausschnitte):

So soll es sein (und so ist es ohne Doctype):






So soll es nicht sein:





Kann mir hier jemand helfen (ich betrachte es nicht auf hilfe, wenn jemand schreibt "lass' doch einfach den Doctype weg..."   ) - ich bin auch für andere Lösungswege offen (ausser für Frames)

DAAANKE


----------



## rootssw (16. Januar 2005)

Hi!

Das liegt daran, dass die Positionierungsart in diesem Fall nicht richtig interpretiert wird.
Füge deinem StyleSheet einfach eine absolute Positionierung hinzu, dann sollte es klappen.


```
<table style="position:absolute;width:100%;height:100%">
```


----------



## hela (16. Januar 2005)

Hallo SetoKaiba,

   das ist das gleiche Problem wie hier. Nach der HTML 4.01-Spezifikation gibt es keine Höheneigenschaft für Tabellen. Diese Eigenschaft unterstützen die Browser bestenfalls im Quirksmode.

 Du musst dir also einen Dokumententyp raussuchen, in dem alle Browser im Quirksmode arbeiten. Leider weiss ich jetzt nur vom IE, dass er im Quirksmode diese Eigenschaft unterstützt, bei den anderen Browsern musst du es selbst mal ausprobieren.


----------



## rootssw (16. Januar 2005)

Genau dazu verwendet er doch CSS!
Du meinst jetzt das Attribut "height=100%".
Man könnte es zwar als ein wenig gemogelt bezeichnen, aber es klappt!


----------



## hela (16. Januar 2005)

Hallo,
 rootssw hat recht. Ich habe überlesen, dass das als Stylesheet formuliert ist und das ist m.E. nicht gemogelt und funktioniert auch.

 edit:
 Übrigens fehlt im obigen Code-Beispiel der Abschluss-Tag für die Tabelle.


----------



## hela (16. Januar 2005)

Hallo SetoKaiba,

 jetzt ist es klar! Du musst in den Stylesheets die Breite und Höhe des Elternelements (BODY) spezifizieren. Also gleich zuerst in den Stylesheets

```
<style type="text/css">
     html, body {
     	width: 100%;
     	height: 100%;
   }
  ...
```
     Und dann klappts auch mit dem DOCTYPE im Standardmode.


----------

