Pourquoi ma hauteur de div 100% ne fonctionne que lorsque DOCTYPE est supprimé?

C'est le code entier: 

<!DOCTYPE HTML>
<html>
<body style="height: 100%; padding: 0; margin: 0;">
    <div style="background-color: green; height: 100%; width: 100%"></div>
</body>
</html>

rien n'apparaît. Mais si je supprime la première ligne (la doctype ), toute la page est verte comme prévu.

j'ai deux questions:

  1. Comment faire pour que le div remplisse la page sans enlever cette étiquette?
  2. pourquoi enlever le doctype le fait fonctionner?
19
demandé sur Michael_B 2015-08-26 00:10:50

5 réponses

CSS height de la propriété, des valeurs de pourcentage & DOCTYPE

la première partie de votre question demandant comment appliquer une hauteur de 100% à votre div a été répondu plusieurs fois par d'autres. Essentiellement, déclarer une hauteur sur l'élément racine: 

html { height: 100%; }

Une explication complète peut être trouvée ici:

la deuxième partie de votre question a reçu beaucoup moins d'attention. Je vais essayer de vous répondre.

pourquoi supprimer le doctype fait-il fonctionner [le fond vert]?

lorsque vous supprimez le DOCTYPE ( déclaration du type de document ) le navigateur passe du mode standard au mode quirks .

In quirks mode , également connu sous le nom de compatibilité mode , le navigateur simule un vieux navigateur afin qu'il puisse analyser de vieilles pages web – pages rédigées avant l'avènement des normes web. Un navigateur en mode quirks prétend être IE4 , IE5 et Navigateur 4 donc il peut rendre l'ancien code, comme le souhaitait l'auteur.

Voici comment Wikipedia définit le mode quirks:

dans l'informatique, le mode quirks se réfère à une technique utilisée par certains web navigateurs pour le souci de maintenir la compatibilité ascendante avec le web pages conçues pour les navigateurs plus anciens, au lieu de se conformer strictement Normes W3C et IETF en mode standard.

MDN s take:

dans les vieux jours du web, les pages étaient généralement écrites en deux versions: une pour Netscape Navigator, et une pour Microsoft Internet Explorer. Lorsque les normes web ont été faites au W3C, les navigateurs ne pouvaient pas il suffit de commencer à les utiliser, car ce faisant briserait la plupart des sites existants sur Web. Les navigateurs ont donc introduit deux modes pour traiter les nouveaux les sites conformes aux normes diffèrent des anciens sites patrimoniaux.

maintenant, voici la raison spécifique pour laquelle le height: 100% dans votre code fonctionne en mode quirks mais pas en mode standard:

"

dans mode standard , si l'élément parent a un height: auto (aucune hauteur définie), alors les pourcentages de hauteur des éléments enfants seront également traités comme height: auto ( selon la spécification ).

C'est pourquoi la réponse à votre première question est html { height: 100%; } .

Pour height: 100% pour travailler dans votre div , vous devez définir un height sur les éléments parents ( plus de détails ).

en mode quirks, cependant, si l'élément parent a un height: auto , alors les hauteurs en pourcentage des éléments enfants sont mesurées par rapport au viewport .

Voici trois références, couvrant ce comportement:

TL; DR

Voici ce que les développeurs ont besoin de savoir en un mot:

un navigateur en mode quirks rendra les pages web d'une manière qui est imprévisible, peu fiable et souvent indésirable. Ainsi toujours inclure un DOCTYPE pour le rendu du document en mode standard .

sélectionner le bon DOCTYPE utilisé pour être un ambigu et quelque peu processus confondant avec beaucoup de DOCTYPE versions à choisir dans . Mais aujourd'hui, le processus est aussi simple que jamais. Il suffit d'utiliser: 

<!DOCTYPE html>
36
répondu Michael_B 2017-05-23 12:18:22

tu veux dire verticalement? les divs sont des éléments de niveau bloc et, en tant que tels, ils remplissent le parent horizontalement par défaut.

pour que cela fonctionne, vous devez également donner à la balise HTML une hauteur de 100%. 

html, body { height:100%; }

voir ici pour un échantillon de travail:

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

comme indiqué par certains des autres ici, une fois que vous retirez la première ligne (Le HTML5 doctype), les navigateurs afficheront la page d'une manière différente et dans ce cas, il n'est pas nécessaire de donner à la balise HTML une hauteur explicite de 100%.

8
répondu HaukurHaf 2015-08-25 21:19:38

avec le HTML5 doctype vous devez également définir la hauteur sur l'élément html: 

html {
    height:100%;
}
4
répondu j08691 2015-08-25 21:14:15

vous devrez définir la largeur et la hauteur de <html> et <body> étiquette à 100% aussi bien parce que lorsque vous assignez la largeur et la hauteur du <div> à 100%, cela signifie que vous lui assignez la pleine largeur et la hauteur de son élément parent, dans ce cas, l'élément parent du <div> est <body> et l'élément parent de <body> est <html> .

pourquoi cela fonctionne-t-il quand je supprime le <!DOCTYPE html> tag ?

parce que lorsque vous supprimez la balise <!DOCTYPE html> , le navigateur rend la page de manière différente, montrant d'autres résultats.

4
répondu Arjun 2015-12-29 00:13:33

vous auriez besoin de faire votre html et la hauteur des balises de corps 100% pour remplir la page.

css: 

html, body{
  height: 100%;
}
1
répondu dinomix 2015-08-25 21:14:36