HTML 5 Doctype ha rovinato il layout

Il mio sito Web è stato quasi completato al 100% quando ho controllato il W3C Validator. Ho un errore dicendo che non ho dichiarato un Doctype. Così ho aggiunto l'HTML 5 <!DOCTYPE html>. OK, l'errore è sparito. Ma perché il layout diventa così incasinato?HTML 5 Doctype ha rovinato il layout

Si prega di vedere qui sotto.
http://itsdaffa.16mb.com/ -> Senza Doctype
http://itsdaffa.16mb.com/error.html -> CON Doctype

ho inciampato su alcune risposte relative a problemi simili, ma non riuscivo a capire veramente in quanto la maggior parte sono di errore specifico del loro codice. Ad esempio, in this question, l'utente ha risolto il problema rimuovendo i valori delle proprietà negative right mentre non ne ho nel mio codice.
Sono un principiante assoluto di questo, infatti questo è il primo sito Web che sto costruendo da zero. Ho un disperato bisogno di aiuto. Grazie :)

fonte

2015-06-07 Daffa Alif Pratama

Ho modificato la questione per dimostrare che non è duplicato. –

ok, bandiera commento cancellata. – Blake

Avrete bisogno di mettere questo nel CSS:

html, body { 
    height: 100% 
}

Il motivo è quando si aggiunge il doctype, allora si passa da quirks mode alla modalità standard. In modalità standard, gli elementi html e body non assumono il 100% di altezza.

Vedi spiegazione here

fonte

2015-06-07 14:46:20 Jackson

Grazie! Questo ha risolto il mio problema. Qualche idea sul perché non posso solo selezionare il 'body' e devo includere' html' come 'height: 100%'? La domanda collegata non spiega perché debba selezionare anche il tag 'html'. Grazie. –

Fondamentalmente il corpo può essere grande solo quanto il suo contenitore (l'elemento HTML). Se ci pensi come un mazzo di carte; Il mazzo di carte rappresenta l'elemento html, le carte rappresentano l'elemento del corpo contenuto all'interno dell'html. Troverai difficile inserire più di 52 carte nel mazzo. Per questo motivo è necessario aumentare le dimensioni del pacchetto di carte. – Jackson

Grazie! Le cose iniziarono molto bene. Ma perdona la mia curiosità, al contrario, perché non posso selezionare solo il tag 'html'? –

HTML 5 Doctype ha rovinato il layout

risposta

Problemi correlati