Voulez-vous dire vertical ? Les divs sont des éléments de niveau bloc, donc par défaut ils remplissent l'élément parent horizontalement.

Pour que cela fonctionne correctement, vous devez également définir la hauteur de la balise HTML à 100 %.

html, body { height:100%; }

Voir un exemple de travail ici :

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

Comme d'autres l'ont dit ici, une fois que vous supprimez la première ligne (type de document HTML5), les navigateurs afficheront la page différemment, auquel cas il n'est pas nécessaire de spécifier une hauteur explicite de 100 % pour la balise HTML.

CSSheightPropriétés, valeurs en pourcentage et DOCTYPE

Lapremière partie devotre questiondivdemande comment appliquer une hauteur de 100 % à votre

, à laquelle d'autres ont répondu à plusieurs reprises. Essentiellement, déclarer la hauteur de l'élément racine :

html { height: 100%; }

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

• heightUtilisez les propriétés CSSet les valeurs en pourcentage
.

---

Ladeuxième partie

de votre question a reçu beaucoup moins d'attention. Je vais essayer de répondre à cette question.

Lorsque vous supprimez le DOCTYPE (Déclaration de type de document), le navigateur passe duMode standardauMode étrange

.

EnWeird Mode, également connu sous le nom deCompatibility Mode, le navigateur émule les anciens navigateurs afin de pouvoir analyser les anciennes pages Web - des pages écrites avant l'existence des normes Web. Le navigateur en mode bizarre se fait passer pourIE4,IE5 et Navigator 4

afin de pouvoir restituer l'ancien code comme l'auteur l'avait prévu.

Voici commentWikipedia

définit le mode bizarreries :

Voici l'avis deMDN

:

height: 100%Maintenant, voici les raisons spécifiques pour lesquellesdans votre code fonctionne en mode bizarre mais pas en mode standard :

Enmode standards高度: auto（没有定义高度），那么子元素的百分比高度也将被视为height: auto, si l'élément parent a(selon les spécifications

).

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

.

height: 100%在div中工作，您必须在父元素上设置heightPour quefonctionne au sein de, vous devez définir

sur l'élément parent (

plus de détailsheight: auto).Cependant, en mode bizarre, si l'élément parent a

, le pourcentage de hauteur de l'élément enfant sera

mesuré par rapport à la fenêtre d'affichage

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

• https://www.cs.tut.fi/~jkorpela/bizarre mode.html
• https://stackoverflow.com/a/1966377/3597276
• https://developer.mozilla.org/en-US/docs/Mozilla_Quirks_Mode_Behavior

---

TL;DR

En un mot, voici ce que les développeurs doivent savoir :