Pourquoi les hauteurs de division s'affichent-elles différemment dans Firefox et Internet Explorer ?

Anomalie de rendu de la hauteur IE Div

Dans le développement Web, il est courant de rencontrer des problèmes de compatibilité entre navigateurs. L'un de ces problèmes est la différence de rendu de la hauteur des div entre Firefox et Internet Explorer.

Le problème :

Dans ce cas, le div conteneur a deux div enfants qui devraient occupent idéalement 100 % de la largeur et de la hauteur du conteneur. Dans Firefox, cela fonctionne comme prévu. Cependant, dans IE, les divs ne s'étendent que jusqu'à la hauteur de leur contenu, laissant un espace vide au-dessus d'eux.

Cause fondamentale :

La principale différence réside dans le pourcentage -la hauteur basée sur est calculée. Dans Firefox, le pourcentage est relatif à la hauteur de la fenêtre. Cependant, dans IE, c'est relatif à la hauteur du bloc conteneur, qui est le div du conteneur dans ce cas.

Solution :

Pour résoudre ce problème, il est Il est nécessaire de spécifier explicitement la hauteur du conteneur div. De plus, étant donné que le bloc conteneur peut être un élément ancêtre, il est conseillé de définir la hauteur du et éléments à 100 % également. Cela garantit que la hauteur du div du conteneur peut être calculée correctement.

Dans le code CSS révisé ci-dessous, la hauteur du est défini sur 100 % et les hauteurs de et sont également précisés :

<code class="css">html, body { height: 100%; }
#container { height: 100%; }
#container #mainContentsWrapper { height: 100%; }
#container #sidebarWrapper { 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!