HTML 5 Doctype vermasselt Layout

Meine Website war fast 100% fertig, als ich es zum W3C Validator überprüfte. Ich habe einen Fehler erhalten, der besagt, dass ich keinen Doctype deklariert habe. Also habe ich den HTML 5 <!DOCTYPE html> hinzugefügt. OK, der Fehler ist weg. Aber warum wird das Layout so durcheinander?HTML 5 Doctype vermasselt Layout

Bitte sehen Sie es sich unten an.
http://itsdaffa.16mb.com/ -> Ohne Doctype
http://itsdaffa.16mb.com/error.html -> MIT Doctype

Ich habe auf einige Antworten zu ähnlichen Problemen stolperte, konnte aber nicht wirklich verstehen, da meist ihren Code spezifischen Fehler sind. In this question zum Beispiel löste der Benutzer sein Problem durch Entfernen negativer right Eigenschaftswerte, während ich keine in meinem Code habe.
Ich bin ein absoluter Anfänger, in der Tat ist dies die erste Website, die ich von Grund auf neu erstellen. Ich brauche dringend Hilfe. Thanks :)

Quelle

2015-06-07 Daffa Alif Pratama

ich die Frage bearbeitet haben zu beweisen, dass es nicht zu einem doppelten wird. –

ok, Kommentarflagge gelöscht. – Blake

Sie müssen dies in Ihrem CSS setzen:

html, body { 
    height: 100% 
}

Der Grund dafür ist, wenn man den Doctype hinzufügen, dann wechseln Sie von Quirks-Modus auf Standardmodus. Im Standard-Modus sind die HTML- und Body-Elemente standardmäßig nicht auf 100% Höhe eingestellt.

Siehe Erklärung here

Quelle

2015-06-07 14:46:20 Jackson

Danke! Das hat mein Problem gelöst. Irgendeine Idee, warum ich nicht nur den "Körper" auswählen kann und "html" als "Höhe: 100%" beinhalten muss? Die Frage verknüpft erklärt nicht, warum es das 'html' Tag auch wählen muss. Vielen Dank. –

Grundsätzlich kann der Körper nur so groß sein wie sein Container (das HTML-Element). Wenn Sie daran denken wie ein Kartenspiel; Das Deck Pack stellt das HTML-Element dar, die Karten repräsentieren das Body-Element, das im HTML enthalten ist. Sie werden es schwierig finden, mehr als 52 Karten in das Decks-Paket zu packen. Aus diesem Grund müssten Sie die Größe des Kartenpakets erhöhen. – Jackson

Danke! Die Dinge begannen zu klar. Aber verzeihen Sie meine Neugier, im Gegensatz dazu, warum ich nur das 'html' Tag nicht auswählen kann? –

HTML 5 Doctype vermasselt Layout

Antwort

Verwandte Themen