Comment la « hauteur : 100 % » du HTML fonctionne-t-elle avec les valeurs en pourcentage et l'impact de DOCTYPE ?

Propriété HTML et valeurs en pourcentage

En HTML, la propriété height peut être définie sur une valeur en pourcentage pour spécifier la hauteur de l'élément par rapport à son élément parent. Cependant, cela ne fonctionne que si l'élément parent a une hauteur explicite définie. Par défaut, les éléments ont une hauteur implicite de "auto", ce qui signifie que leur hauteur est automatiquement déterminée en fonction de leur contenu.

La première partie de votre question, concernant la façon de remplir le div la page sans supprimer le DOCTYPE, peut être répondu en modifiant le CSS pour inclure une déclaration de hauteur pour le "html" element:

html { hauteur : 100 % ; }<br>

Cette solution élimine le besoin de supprimer le DOCTYPE, garantissant que la page est rendue en mode standard sans interrompre la fonctionnalité de hauteur.

Mode bizarreries par rapport aux normes Mode

La deuxième partie de votre question, concernant l'effet de la suppression du DOCTYPE, approfondit la différence entre le mode bizarreries et le mode standards.

Quand un DOCTYPE est présent, le navigateur passe en mode standards, qui adhère strictement aux standards du web. Cependant, si le DOCTYPE est omis, le navigateur passe en mode bizarreries, qui tente d'émuler le comportement des navigateurs plus anciens.

En mode standards, les pourcentages de hauteur sont toujours calculés par rapport à la hauteur de leur élément parent. Dans votre exemple, puisque l'élément body n'a pas de hauteur explicite (il est défini sur « auto »), la hauteur du div de 100 % est effectivement calculée comme « auto », ce qui n'entraîne aucun contenu visible.

En revanche, le mode bizarreries fonctionne avec des règles moins prévisibles. Dans ce mode, la hauteur du div est calculée par rapport à la hauteur de la fenêtre d'affichage, permettant au div de remplir la page entière comme prévu.

Conclusion

La définition d'une valeur de hauteur de 100 % pour un div fonctionne comme prévu en mode standards uniquement lorsque l'élément parent a une hauteur explicite définie. En définissant la hauteur de l'élément HTML sur 100 %, vous pouvez vous assurer que les pourcentages de hauteur dans la page sont calculés correctement. Si le DOCTYPE est supprimé, le navigateur passe en mode bizarreries, ce qui modifie le calcul des pourcentages et permet au div de remplir la page avec une hauteur de 100%, même lorsque la hauteur de son parent n'est pas explicitement précisée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!