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

Status
Nicht offen für weitere Antworten.

SetoKaiba

Mitglied
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:

Code:
<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):
richtig.jpg


So soll es nicht sein:
falsch.jpg


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

DAAANKE
 
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.

HTML:
<table style="position:absolute;width:100%;height:100%">
 
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.
 
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!
 
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.
 
Zuletzt bearbeitet:
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
Code:
  <style type="text/css">
     html, body {
     	width: 100%;
     	height: 100%;
   }
  ...
Und dann klappts auch mit dem DOCTYPE im Standardmode.
 
Status
Nicht offen für weitere Antworten.
Zurück