Pourquoi les divisions internes ne parviennent-elles pas à atteindre leur pleine hauteur dans IE lorsque vous utilisez une hauteur de 100 % dans une division conteneur ?

Performances de hauteur CSS dans le positionnement des div sur Firefox et IE

Dans ce scénario, l'objectif est de créer un div conteneur qui encapsule deux div internes divs, couvrant tous deux 100 % de la largeur et de la hauteur. Bien que cela fonctionne comme prévu dans Firefox, IE présente un comportement particulier où les divs internes ne parviennent pas à atteindre toute la hauteur du conteneur, les laissant à la hauteur du texte contenu.

Cette divergence découle du concept de un "bloc contenant" dans le calcul CSS. Les pourcentages ne sont pas calculés par rapport à la fenêtre d'affichage mais plutôt par rapport à la hauteur du "bloc contenant" - dans ce cas, le div #container.

Dans le CSS fourni, #container n'a pas de spécification explicite de hauteur, s'appuyant sur "auto" par défaut. Cela signifie que sa hauteur est déterminée en fonction du contenu à l'intérieur. Par la suite, la propriété de hauteur 100 % pour les divs internes devient relative à cette hauteur automatique, qui varie en fonction du contenu du texte.

Pour remédier à ce problème, les ajustements suivants sont nécessaires :

1. Déclarez une valeur de hauteur explicite pour #container pour établir le bloc contenant :

   <code class="css">#container {
     height: 100%;
   }</code>

   Copier après la connexion

2. Définissez les hauteurs pour le HTML et le corps, car le bloc contenant initial est celui du navigateur. dependant :

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

   Copier après la connexion

Ces modifications permettront aux divs internes de s'étendre sur toute la hauteur du #container et 100 % de la fenêtre d'affichage, résolvant ainsi les problèmes de hauteur observés dans IE.

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!