Pourquoi mon enfant DIV n'hérite-t-il pas de la hauteur à 100 % de son parent flottant ?

Application d'une hauteur de 100 % pour le DIV enfant au sein du parent flottant

Dans le HTML et le CSS fournis, la hauteur du DIV interne reste à 0px malgré les efforts de le déclarer à 100 % du revenu du parent hauteur.

Solution :

Pour résoudre ce problème, le DIV parent, "externe", nécessite une propriété "display: flex" pour activer la fonctionnalité flexbox :

#outer {
  display: flex;
}

Flexbox introduit la prise en charge de mises en page flexibles, permettant au DIV interne, « intérieur », de s'étendre verticalement et d'occuper toute la hauteur de son parent.

Considérations supplémentaires :

1. Compatibilité des navigateurs : Flexbox est largement pris en charge par les navigateurs modernes mais peut poser des problèmes de compatibilité avec les anciennes versions d'Internet Explorer (par exemple, IE9). Utilisez des préfixes pour garantir la compatibilité entre différents navigateurs.
2. Align Items vs. Align Self : "align-items" est une propriété du parent qui détermine l'alignement vertical de ses enfants. Sa valeur par défaut est "stretch", étirant tous les enfants verticalement pour remplir la hauteur disponible. Si un alignement différent est souhaité pour le DIV enfant, utilisez la propriété "align-self".
3. Exemple JS Fiddle : Visitez https://jsfiddle.net/bv71tms5/2/ pour voir un exemple fonctionnel de la solution suggérée.

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!