Comment puis-je faire en sorte que les divisions enfants dans une mise en page multicolonnes aient des hauteurs égales ?

Gestion dynamique de la hauteur dans les mises en page multi-colonnes

Imposer une hauteur uniforme entre les éléments enfants peut s'avérer difficile, en particulier lorsque la hauteur du conteneur parent n’est pas précisé. Cet article explique comment atteindre 100 % de hauteur pour un div enfant au sein d'un div parent de hauteur non spécifiée.

Considérez la structure HTML suivante :

<div>

L'objectif est de créer la "navigation" La hauteur du div correspond à la hauteur du div « contenu », quelle que soit la taille du contenu.

Pour y parvenir, le div parent (« principal ») doit être configuré avec display: flex; et aligner les éléments : étirer ;. La propriété display permet une mise en page flexible, tandis que align-items: stretch force les éléments enfants à s'étirer verticalement pour remplir la hauteur du parent. Notez que align-items: stretch est la valeur par défaut, mais évitez de la définir sur d'autres valeurs.

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!