# CSS: height: 100% abhängig von DocType?



## stonedjehova (7. Oktober 2004)

Hallo,

ich habe ein Problem mit einer Seite, wenn ich im Bsp unten den Doctype weglasse, dann wird die Tabelle 100% dargestellt, mit Doctype nicht, aber warum?

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Initiativbewerbung</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%;">
	<table style="width: 100%; height: 100%; border-spacing: 0px; border-collapse: collapse;">
		<tr>
			<td style="width: 20px; height: 50px;"></td>
			<td style="width: 100px; height: 50px; background-color: #123456;"></td>
			<td style="height: 50px; font-size: 30px; font-family: 'times new roman', roman; letter-spacing: 5px; color: #123456; padding-left: 20px;">
			Name
			</td>
		</tr>
		<tr>
			<td style="width: 20px; height: 50px;background-color: #123456;"></td>
			<td style="width: 100px; height: 50px;background-color: #123456;"></td>
			<td style="height: 50px; background-color: #123456; padding-left: 10px; padding-right: 50px; font-size: 30px; vertical-align: middle; text-align: right; color: #FFFFFF;">
			Referenzen
			</td>
		</tr>
		<tr>
			<td style="width: 20px;"></td>
			<td style="width: 100px; background-color: #123456;">
				<p style="margin-right: 5px; margin-top: 40px; text-align: right;"><a class="hell" href="index.html" onfocus="blur()">Startseite</a></p>
				<p style="margin-right: 5px; margin-top: 10px; text-align: right;"><a class="hell" href="anschreiben.html" onfocus="blur()" >Anschreiben</a></p>
				<p style="margin-right: 5px; margin-top: 10px; text-align: right;"><a class="hell"  href="lebenslauf.html" onfocus="blur()" >Lebenslauf</a></p>
				<p style="margin-right: 5px; margin-top: 10px; text-align: right;"><a class="hell"  href="referenzen.html" onfocus="blur()" >Referenzen</a></p>
				<p style="margin-right: 5px; margin-top: 10px; text-align: right;"><a class="hell"  href="download_d.html" onfocus="blur()" >Download</a></p>
				<p style="margin-right: 5px; margin-top: 10px; text-align: right;"><a class="hell"  href="kontakt.html" onfocus="blur()" >Kontakt</a></p>
			</td>
			<td style="color: #123456; font-size: 14px; vertical-align: top;">
				<p style="margin-left: 10%; margin-right: 10%; margin-top: 30px;">
				Hier haben Sie die M&ouml;glichkeit in bisherige Zeugnisse Einsicht zu nehmen.</p>
				<p style="margin-left: 10%; margin-right: 10%">
				Die Hyperlinks führen jeweils zu einem PDF-Dokument, am Ende sind alle Unterlagen komplett in einem PDF zusammengefasst.</p>
				<table border="0" style="height: 100%; margin-left: 10%; margin-right: 10%; margin-top: 20px; border-style: none; border-spacing: 0px; border-collapse: collapse;">
					<colgroup>
						<col width="200">
						<col>
					</colgroup>
					<tr>
						<td style="font-weight: bold; border-bottom: solid 2px #123456; padding-left: 5px; padding-right: 5px;">Dokument</td>
						<td style="font-weight: bold; border-bottom: solid 2px #123456; padding-left: 5px; padding-right: 5px;">Download / Gr&ouml;&szlig;e</td>
					</tr>
					<tr>
						<td style="padding-top: 10px;">Bachelor Abschlusszeugnis</td>
						<td style="padding-left: 25px;">PDF</td>
					</tr>
					<tr>
						<td style="padding-top: 10px;">Praktikanten-Zeugnis</td>
						<td style="padding-left: 25px;">PDF</td>
					</tr>
					
				</table>
			</td>
		</tr>
	</table>
</div>
</body>
</html>
```


----------



## Gumbo (7. Oktober 2004)

Das wird dann wohl nur eine Fehlinterpretation des Internet Explorers sein, denn in meinem Firefox sieht beides – bis auf den Unterschied, dass CSS nur mit Dokumententyp Deklaration  korrekt interpretiert wird – gleich aus.


----------



## stonedjehova (8. Oktober 2004)

ja, eben, im firefox macht das keinen unterschied...... aber halt im IE. hab keine ahnung was ich machen soll, aber die deklaration weglassen, ist ja auch nicht so das wahre


----------



## Gumbo (8. Oktober 2004)

Möglicherweise liegt es ja an dem fehlenden style.css Stylesheet.


----------



## stonedjehova (8. Oktober 2004)

Nein, das ist auch da, ausserdem würde es auch ohne das funktionieren, da die css Eigenschaften direkt im Dokument in der Initialisierung der Tabellen angegeben sind.
Wie gesagt ohne die Doctypes funktioniert es wunderbar, im IE und Firefox


----------



## Cyberbird (12. Oktober 2004)

Du kannst einfach im Stylesheet den body und html mit 100% Höhe versehen, also so:

```
body, html {
  height: 100%;
}
```
Dann wird deine Höhe auch mit Doctype entsprechend interpretiert.


----------



## stoupa91 (21. Oktober 2004)

sehr gut beschrieben ist dein problem unter http://www.quirksmode.org/css/100percheight.html


----------



## stonedjehova (8. November 2004)

Danke, klingt ganz interessant, werde ich bei Gelegenheit ausprobieren.


----------



## Prefect (1. Dezember 2004)

Hi All!

Diese dooofe DocTypes...  Ohne gehts perfekt, mit (immerhin) nur im Firefox:

http://www.saentis-investment.ch/new/index.php
und
http://www.saentis-investment.ch/new/styles.css

Sobald ich einen DocType angebe (XHTML 1. oder HTML 4.01) zerreists das Layout im IE. Genauer: Die Layouttabelle ignoriert auf einmal alle height-Angaben im CSS für die einzelnen TDs und stellt alle auf automatisch.

Komme echt nicht mehr weiter.. Sonst lass ichs halt ohne DocType, was ich aber vermeiden möchte.

Thanks und Grüsse! Chris


----------

