Maison >interface Web >tutoriel CSS >Comment la déclaration DOCTYPE affecte-t-elle les calculs de pourcentage de hauteur CSS ?
Comment la déclaration DOCTYPE affecte-t-elle les calculs de pourcentage de hauteur CSS ?
- Barbara Streisandoriginal
- 2024-12-20 10:24:17707parcourir
Propriété CSS Height, valeurs en pourcentage et DOCTYPE
Lorsque vous spécifiez une hauteur de 100 % pour votre élément div, cela peut ne remplit pas toute la page car en mode standards (lorsque le DOCTYPE est inclus), le navigateur applique le pourcentage de hauteur par rapport au parent la hauteur de l'élément. Cependant, si vous supprimez le DOCTYPE, le navigateur passe en mode bizarreries et interprète la hauteur de 100 % par rapport à la fenêtre d'affichage.
Faire en sorte que le Div remplisse la page
Pour vous assurer que votre div remplisse la page sans supprimer le DOCTYPE, déclarez une hauteur à la racine element :
html { height: 100%; }
Pourquoi la suppression du DOCTYPE affecte le calcul de la hauteur
Lorsque le DOCTYPE est supprimé, le navigateur passe du mode standards au mode bizarreries. En mode bizarreries, les hauteurs en pourcentage des éléments enfants sont calculées différemment :
- Mode Standards : Si l'élément parent a une hauteur auto, les hauteurs en pourcentage des éléments enfants sont également traitées comme auto.
- Mode bizarreries : Si l'élément parent a une hauteur auto, les hauteurs en pourcentage des éléments enfants sont mesurées par rapport à la fenêtre d'affichage.
Puisque vous n'avez pas défini de hauteur sur l'élément parent de votre div, la hauteur de 100 % est mesurée par rapport à la fenêtre d'affichage en mode bizarreries, ce qui fait que l'arrière-plan vert remplit la page comme attendu.
Importance d'un DOCTYPE
L'utilisation d'un DOCTYPE est cruciale car elle garantit que le navigateur affiche votre page Web en mode standard. Ce mode suit les normes Web modernes, garantissant un rendu cohérent et fiable sur différents navigateurs. Le mode Quirks, en revanche, simule les anciens navigateurs pour s'adapter aux pages Web existantes, ce qui peut entraîner un comportement imprévisible et indésirable.
DOCTYPE recommandé
Pour HTML5 documents, le DOCTYPE recommandé 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!