Warum führen bestimmte DOCTYPE-Deklarationen dazu, dass Tabellen und Divs mit 100 % Höhe nicht mehr funktionieren?

Lesezeit: 3 Minuten

Eran Medan

Es scheint mir, dass einige DOCTYPE Deklarationen im IE (6-8) können dazu führen, dass der Browser sie ignoriert height="100%" auf Tabellen und divs (style="height:100%")

Z.B

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title>Test1</title>
 </head>
 <body>
  <div style="border: 2px solid red; height: 100%">
  Hello World
  </div>
 </body>
</html>

Werde die rendern DIV mit der Höhe des Textes wird es nicht gedehnt. Entferne den DOCTYPE Deklaration bewirkt die DIV wie gewünscht vertikal strecken.

Also meine Fragen sind:

Warum passiert das?

Wie halten Sie die DOCTYPE und still Tabellen strecken lassen?
Ist/ist es dir passiert?
Wussten Sie davon? Ist es bekannt?

Dafür gibt es einen bestimmten Grund height: 100% funktioniert ohne DOCTYPE. Siehe meine Erklärung hier: stackoverflow.com/a/32215263/3597276

– Michael Benjamin

1. September 15 um 21:06 Uhr

Weil alte Browser ein seltsames, inkonsistentes Verhalten hatten und Browser Doctypes wie behandeln ein Intelligenztest um zu sehen, ob der Autor Code nach den Standards schreibt oder nach dem, was er vor einem Jahrzehnt von W3Schools gelernt hat. Wenn Sie haben height: 100% und die Höhe des übergeordneten Elements ist auto dann 100% bedeutet auto.
Im Allgemeinen nicht. Es schreit“Layout-Tabelle“. Das heißt, legen Sie Höhen oder Mindesthöhen für die HTML- und Body-Elemente fest. Es gibt andere Techniken, aber ich habe im Moment keinen praktischen Link, da ich seltsamerweise nie in einer Position war, in der ich die benötigte Technik.
Es ist das, was Browser tun sollen, also …

Nun, ich beantworte diese Frage …

Das Entfernen der DOCTYPE-Deklaration ist also pures Übel? Und Fußzeilen, die am unteren Rand haften, sind eine schlechte Benutzeroberfläche?

– Eran Medan

4. Januar 10 um 8:09 Uhr
Ja und nein. Sie könnten meinen Kommentar falsch interpretieren, dass Sie den Boden von a haben Tabelle am unteren Rand des Fensters und/oder der Seite kleben (je nachdem, was länger ist).

– QUentin

4. Januar 10 um 8:53 Uhr
Also zu verstehen, dass es nicht das Problem ist, am unteren Rand zu bleiben, sondern das “Layout-Tabellen” -Muster, weil es a) nicht damit gemacht werden kann (wenn Sie den DOCTYPE beibehalten) und b) auch eine schlechte Praxis ist (hotdesign.com/seybold). Dazu sollte man andere Techniken verwenden (zB DIVs und CSS rein). Habe ich es richtig gesagt?

– Eran Medan

4. Januar 10 um 9:08 Uhr
Sie sollten jedes Markup verwenden, das die Semantik hat, die den Inhalt am besten beschreibt (div ist der letzte Ausweg, da es keine Semantik hat, und Tabellen sind nur eine Option, wenn die Daten tabellarisch sind).

– QUentin

4. Januar 10 um 9:23 Uhr

Eine echte Lösung für dieses “Problem” wäre die Verwendung des folgenden CSS:

html, body {
    margin: 0;
    padding: 0;
    border: none;
    height: 100%;
}

#mydiv {
    height: 100%;
}

Denken Sie jedoch daran, dass eine Umrandung Höhe hinzufügt.

Danke! Fehlte der HTML-Selektor

– Rob R.

11. Februar 14 um 22:01 Uhr

Wenn Sie den Doctype entfernen, wechselt der Browser in den Quirks-Modus, der Dinge anders macht, um älteren Code, der nicht validiert ist, korrekt darzustellen.

Sie müssen die Höhe für das Containerelement festlegen, damit das div mit 100 % Höhe nicht height erbt: auto;

Sie könnten versuchen, von Transitional zu Strict zu wechseln, aber ich bezweifle, dass dies Ihr Problem beheben wird.

5380800cookie-checkWarum führen bestimmte DOCTYPE-Deklarationen dazu, dass Tabellen und Divs mit 100 % Höhe nicht mehr funktionieren?

#Dokumenttyp #html #Quirks-Modus #Übergangs