Maison >interface Web >tutoriel CSS >Pourquoi un div de 100 % de hauteur ne remplit-il la page que lorsque le DOCTYPE est supprimé ?
Pourquoi un div de 100 % de hauteur ne remplit-il la page que lorsque le DOCTYPE est supprimé ?
- Mary-Kate Olsenoriginal
- 2024-12-27 13:37:11497parcourir
Pourquoi la hauteur 100 % fonctionne-t-elle lorsque DOCTYPE est supprimé ?
Cet extrait de code tente de remplir la page entière avec un vert div :
<!DOCTYPE HTML> <html> <body>
Cependant, cela ne fonctionne pas comme prévu. Le div reste invisible. Si nous supprimons la déclaration DOCTYPE (), le div se développe soudainement pour remplir la page entière. Cela soulève deux questions :
Comment faire en sorte que le div remplisse la page sans supprimer la déclaration DOCTYPE ?
Pour que le div remplisse la page sans supprimer le DOCTYPE, définissez simplement la hauteur de l'élément racine (html) sur 100% :
html { height: 100%; }
Pourquoi la suppression de la déclaration DOCTYPE la fait-elle fonctionner ?
Lorsqu'un DOCTYPE est présent, le navigateur restitue la page selon les standards mode. En mode standards, les pourcentages de hauteur des éléments enfants sont traités comme height : auto si l'élément parent n'a pas de hauteur explicite. C'est pourquoi le div ne remplit pas la page en mode standards.
Cependant, lorsque le DOCTYPE est absent, le navigateur passe en mode bizarreries. En mode bizarreries, les hauteurs en pourcentage des éléments enfants sont mesurées par rapport à la fenêtre d'affichage. Cela signifie que le div dans l'exemple ci-dessus remplira toute la page en mode bizarreries car sa hauteur est définie à 100 % de la hauteur de la fenêtre d'affichage.
Conclusion
Il est important de toujours inclure une déclaration DOCTYPE pour garantir que la page s'affiche en mode standards. Le mode Quirks est peu fiable et imprévisible, et doit être évité à tout prix. La déclaration DOCTYPE préférée est simplement :
<!DOCTYPE html>
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!