Pourquoi mes DIV ne sont-ils pas à 100 % de hauteur dans Firefox et IE ?

Problèmes de compatibilité de hauteur Div 100 % entre Firefox et IE

Dans ce scénario, vous avez rencontré une disparité dans le rendu des éléments DIV entre Firefox et IE. Plus précisément, définir la hauteur à 100 % dans un DIV contenant n'étend pas les DIV imbriqués à toute la hauteur dans IE.

Les écarts proviennent des comportements du mode Quirks et du mode Standard :

• En mode Quirks (que Firefox peut utiliser par défaut), la hauteur est calculée par rapport à la fenêtre d'affichage.
• En mode Standard (le paramètre recommandé), la hauteur dépend de la hauteur du bloc contenant.

Dans votre code, le bloc conteneur (#container) a une hauteur définie sur 'auto', ce qui en mode Standard donne une hauteur indéfinie. En conséquence, la hauteur des DIV imbriqués devient également indéfinie.

Pour résoudre ce problème et garantir la cohérence entre les navigateurs, vous devez définir explicitement la hauteur du bloc conteneur et de ses ancêtres jusqu'à la racine (HTML et corps elements):

html, body { height: 100%; }
#container { height: 100%; }

En définissant la hauteur de ces éléments, vous établissez un bloc contenant bien défini, permettant aux DIV imbriqués d'hériter de cette hauteur et de s'étendre à 100 % dans leur conteneur dans tous les navigateurs.

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!