Mohammed Hossein R
Dies ist der gesamte Code:
<!DOCTYPE HTML>
<html>
<body style="height: 100%; padding: 0; margin: 0;">
<div style="background-color: green; height: 100%; width: 100%"></div>
</body>
</html>
Nichts erscheint. Aber wenn ich die erste Zeile entferne (die doctype), ist die gesamte Seite wie erwartet grün.
Ich habe zwei Fragen:
div die Seite füllen, ohne dieses Tag zu entfernen?doctype Bring es zum Laufen? 
Michael Benjamin
height Property, Prozentwerte & DOCTYPEDie erster Teil Ihrer Frage, wie Sie eine 100% ige Höhe auf Ihre anwenden können div wurde schon mehrfach von anderen beantwortet. Deklarieren Sie im Wesentlichen eine Höhe für das Stammelement:
html { height: 100%; }
Eine vollständige Erklärung finden Sie hier:
height Eigenschafts- und Prozentwerte.Die zweiter Teil Ihrer Frage hat viel weniger Aufmerksamkeit erhalten. Ich werde versuchen, das zu beantworten.
Warum entfernt man die
doctypemachen [the green background] Arbeit?
Wenn Sie den DOCTYPE entfernen (Dokumenttyp-Deklaration) schaltet der Browser aus Standardmodus zu Quirks-Modus.
Im Quirks-Modusauch bekannt als Kompatibilitätsmodus, simuliert der Browser einen alten Browser, damit er alte Webseiten parsen kann – Seiten, die vor der Einführung von Webstandards erstellt wurden. Ein Browser im Quirks-Modus gibt vor, es zu sein IE4, IE5 und Navigator4 damit alter Code wie vom Autor beabsichtigt gerendert werden kann.
Hier ist wie Wikipedia Definiert den Quirks-Modus:
In der Computertechnik bezieht sich der Quirks-Modus auf eine Technik, die von einigen Webbrowsern verwendet wird, um die Abwärtskompatibilität mit Webseiten aufrechtzuerhalten, die für ältere Browser entwickelt wurden, anstatt die W3C- und IETF-Standards im Standardmodus strikt einzuhalten.
Hier ist MDN‘Einatz:
In den alten Tagen des Internets wurden Seiten typischerweise in zwei Versionen geschrieben: Eine für Netscape Navigator und eine für Microsoft Internet Explorer. Als die Webstandards beim W3C erstellt wurden, konnten Browser sie nicht einfach verwenden, da dies die meisten bestehenden Websites im Web beschädigen würde. Browser haben daher zwei Modi eingeführt, um neue standardkonforme Sites anders zu behandeln als alte Legacy-Sites.
Nun, hier ist der genaue Grund, warum die height: 100% in Ihrem Code funktioniert im Quirks-Modus, aber nicht im Standards-Modus:
Im Standardmoduswenn das übergeordnete Element ein hat height: auto (keine Höhe definiert), dann werden auch die prozentualen Höhen der untergeordneten Elemente behandelt height: auto (gemäß der Spezifikation).
Deshalb lautet die Antwort auf Ihre erste Frage html { height: 100%; }.
Zum height: 100% in Ihrem zu arbeiten divmüssen Sie a einstellen height auf übergeordneten Elementen (mehr Details).
Wenn das übergeordnete Element jedoch im Quirks-Modus eine height: autodann werden die prozentualen Höhen der untergeordneten Elemente gemessen relativ zum Ansichtsfenster.
Hier sind drei Referenzen, die dieses Verhalten abdecken:
Hier ist, was Entwickler auf den Punkt gebracht wissen müssen:
Ein Browser im Quirks-Modus stellt Webseiten auf eine Weise dar, die unvorhersehbar, unzuverlässig und oft unerwünscht ist. Damit immer einen DOCTYPE angeben für das Dokument zum Rendern Standardmodus.
Die Auswahl des richtigen DOCTYPE war früher ein mehrdeutiger und etwas verwirrender Prozess mit viele DOCTYPE-Versionen zur Auswahl. Aber heute ist der Prozess so einfach wie eh und je. Benutz einfach:
<!DOCTYPE html>
Ich habe diese alte Frage, die ich beantwortet habe, als Duplikat dieser Frage markiert. Wieder eins von deiner Bucket List 😉
– BoltClock
19. Februar 2016 um 17:17 Uhr
es ist 2021 und ehrlich? Der Quirk-Modus hat mir nie unvorhergesehene Ergebnisse gebracht
– Ayyash
28. Dezember 2021 um 11:19 Uhr
HaukurHaf
Du meinst vertikal? divs sind Elemente auf Blockebene und füllen als solche standardmäßig das übergeordnete Element horizontal aus.
Damit das funktioniert, müssen Sie dem HTML-Tag auch eine Höhe von 100 % geben.
html, body { height:100%; }
Hier finden Sie ein funktionierendes Beispiel:
http://jsfiddle.net/uhg0y9tm/1/
Wie von einigen anderen hier angegeben, rendern Browser die Seite nach dem Entfernen der ersten Zeile (des HTML5-Dokumenttyps) anders, und in diesem Fall ist es nicht erforderlich, dem HTML-Tag eine explizite Höhe von 100 % zuzuweisen.
Beim HTML5-Doctype müssen Sie auch die Höhe des HTML-Elements festlegen:
html {
height:100%;
}
Arjun
Sie müssen die Breite und Höhe von festlegen <html> und <body> -Tag ebenfalls auf 100 %, denn wenn Sie die Breite und Höhe des zuweisen <div> auf 100 %, bedeutet dies, dass Sie ihm die volle Breite und Höhe seines übergeordneten Elements zuweisen, in diesem Fall des übergeordneten Elements von <div> ist <body> und das übergeordnete Element von <body> ist <html>.
Warum funktioniert es, wenn ich die entferne
<!DOCTYPE html>Schild ?
Denn wenn Sie die entfernen <!DOCTYPE html> -Tag stellt der Browser die Seite auf andere Weise dar und zeigt andere Ergebnisse an.
Sie müssten die Höhe Ihrer HTML- und Body-Tags auf 100 % einstellen, um die Seite zu füllen.
CSS:
html, body{
height: 100%;
}
