Warum wird meine div die Höhe 100% funktionieren nur, wenn "DOCTYPE" entfernt wird?

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 angezeigt. Aber wenn ich Entferne die erste Zeile (die doctype), die alle die Seite ist grün, wie erwartet.

Habe ich zwei Fragen:

  1. Wie mache ich das div füllen Sie die Seite auch ohne das entfernen dieser tag?
  2. Warum entfernen die doctype damit es funktioniert?
InformationsquelleAutor MohammadHossein R | 2015-08-25
  1. 42

    CSS height Eigenschaft, die prozentualen Werte & DOCTYPE

    Den ersten Teil Ihrer Frage, wie das anwenden eines 100% - Höhe zu Ihrem div wurde mehrfach beantwortet, von anderen. Im wesentlichen, deklarieren Sie eine Höhe, auf der sich das root-element:

    html { height: 100%; }

    Eine vollständige Erklärung finden Sie hier:

    Den zweiten Teil Ihre Frage erhalten hat, viel weniger Aufmerksamkeit. Ich werde versuchen Sie zu beantworten.

    Warum entfernen die doctype machen [den grünen hintergrund] arbeiten?

    Beim entfernen der "DOCTYPE" ( Dokument-Typ-Deklaration ) der browser wechselt von - standards-Modus zu quirks-Modus.

    In quirks-Modus, auch bekannt als Kompatibilitätsmodus, der browser simuliert einen alten browser, so kann es analysieren alten web-Seiten – Seiten verfasst vor dem Aufkommen von web-standards. Ein browser im quirks-Modus vorgibt zu sein IE4, IE5 und Navigator 4 so es machen kann alte code als der Autor es beabsichtigt hat.

    Hier ist, wie Wikipedia definiert quirks-Modus:

    In computing, quirks-Modus bezeichnet eine Technik, die von einigen web
    Browser aus Gründen der Abwärtskompatibilität beibehalten mit web
    gestaltete Seiten für ältere Browser, anstatt strikte Einhaltung
    W3C-und IETF-standards in den standards-Modus.

    Hier MDN's nehmen:

    In den alten Tagen von den web-Seiten waren in der Regel schriftlich in zwei
    Versionen: Eine für den Netscape Navigator und eine für den Microsoft Internet
    Explorer. Wenn die web-standards gemacht wurden bei W3C, Browser konnten nicht
    beginnen Sie einfach mit Ihnen, da dies zu tun, brechen die meisten bestehenden Websites
    die web -. Browser deshalb eingeführt, zwei Modi zu behandeln, die neue
    standards konforme Websites anders aus alte legacy-Websites.

    Nun, hier ist der Grund, warum die height: 100% im code funktioniert im quirks-Modus, aber nicht in den standards-Modus:

    In standards-Modus, wenn das übergeordnete element hat eine height: auto (keine Höhe definiert), wird der prozentuale Höhen von untergeordneten Elementen behandelt werden als height: auto (wie pro-spec).

    Dies ist der Grund, warum die Antwort auf Ihre erste Frage ist html { height: 100%; }.

    Für height: 100% Ihre Arbeit in der div möchten, müssen Sie einen height auf übergeordnete Elemente (mehr details).

    Im quirks-Modus, jedoch, wenn das übergeordnete element hat eine height: auto, wird der prozentuale Höhen von untergeordneten Elementen gemessen werden relativ zum viewport.

    Hier sind drei Referenzen, die für diese Verhalten:

    TL;DR

    Hier ist, was Entwickler wissen müssen in aller Kürze:

    Einem browser im quirks-Modus Rendern, web-Seiten in einer Weise, die
    unberechenbar, unzuverlässig und oft unerwünscht. So immer enthalten
    DOCTYPE     für das Dokument zu Rendern in standards-Modus.

    Auswahl des richtigen DOCTYPE verwendet werden, um einen mehrdeutigen und etwas
    verwirrend Prozess mit viele DOCTYPE-Varianten zur Auswahl. Aber
    heute ist der Prozess so einfach wie eh und je. Verwenden Sie einfach:

    <!DOCTYPE html>
    InformationsquelleAutor Michael_B
  2. 9

    Du meinst vertikal? divs sind block-level-Elemente, und als solche machen Sie füllen die Eltern horizontal standardmäßig.

    Um für diese zu arbeiten, müssen Sie auch den HTML-tag eine Höhe von 100%.

    html, body { height:100%; }

    Siehe hier für ein Beispiel arbeiten:

    http://jsfiddle.net/uhg0y9tm/1/

    Wie gesagt um einige der anderen hier, sobald Sie entfernen die erste Zeile (die HTML5-doctype), Browser Rendern die Seite in einer anderen Art und Weise und in diesem Fall, es ist nicht notwendig, um das HTML-Element eine explizite Höhe von 100%.

    InformationsquelleAutor HaukurHaf
  3. 5

    Mit dem HTML5-doctype, müssen Sie auch die Höhe, auf der das html-element:

    html {
    height:100%;
}
    InformationsquelleAutor j08691
  4. 5

    Haben Sie zum festlegen der Breite und Höhe der <html> und <body> tag zu 100% als gut, weil, wenn Sie ordnen Sie die Breite und Höhe des <div> zu 100%, bedeutet es, dass Sie die Zuordnung der vollen Breite und Höhe des übergeordneten Elements, in diesem Fall das übergeordnete element des <div> ist <body> und das übergeordnete element der <body> ist <html>.

    Warum funktioniert es, wenn ich entfernen Sie die <!DOCTYPE html> tag ?

    Da beim entfernen der <!DOCTYPE html> tag, der browser rendert die Seite in verschiedener Weise, zeigen andere Ergebnisse.

    • Schließlich, eine Erklärung, die Sinn macht. Wenn Sie die html-und body-Elemente nicht erweitern zur Deckung der Seite, dann weder wird in Ihnen enthaltenen Elemente. Dies ist eine gute Antwort.
    InformationsquelleAutor Arjun
  5. 2

    Würden Sie brauchen, um Ihre html-und body-tags Höhe von 100% zu füllen die Seite.

    css:

    html, body{
  height: 100%;
}
    InformationsquelleAutor dinomix
Schreibe einen Kommentar