Pourquoi les divisions ne s'étendent-elles pas à la hauteur du conteneur dans IE ?

Calculs de hauteur dans les divs : compatibilité Firefox vs IE

Dans une page Web avec deux divs imbriqués dans un conteneur, l'attente est de les deux divs internes pour occuper entièrement la largeur et la hauteur du conteneur. Cependant, il a été observé que dans Internet Explorer (IE), les divs internes ne s'étendent que jusqu'à la hauteur du texte qu'ils contiennent, contrairement à Firefox où ils s'étendent sur toute la hauteur du conteneur.

Les jeux de feuilles de style fournis les deux divs internes, #mainContentsWrapper et #sidebarWrapper, à 100 % de hauteur. Cela fonctionne comme prévu dans Firefox, mais pas dans IE. La raison de cet écart réside dans la définition du pourcentage de hauteur dans la spécification CSS.

Les pourcentages dans les mesures de hauteur dépendent de la hauteur du « bloc contenant », et non de la fenêtre d'affichage. Dans le scénario donné, #container sert de bloc conteneur pour les divs internes. Comme la hauteur de #container est définie sur « auto », cela dépend de la hauteur du contenu. Par conséquent, le pourcentage de hauteur des divs internes est effectivement calculé comme « auto », ce qui entraîne un comportement inattendu dans IE.

Pour résoudre ce problème, la hauteur de #container doit être explicitement définie. De plus, pour garantir que les divs s'étendent sur toute la hauteur de la fenêtre d'affichage, la hauteur du champ et les éléments doivent également être spécifiés.

En effectuant ces ajustements, le code devrait se comporter comme prévu dans Firefox et IE :

<code class="CSS">html, body { height:100%; }
#container { height:100%; }</code>

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!