Comment puis-je faire en sorte qu'une division flottante atteigne 100 % de la hauteur de son parent ?

Atteindre 100 % de hauteur pour une division flottante au sein du parent

Lorsque vous essayez de définir une div flottante à 100 % de la hauteur de son parent, vous pouvez rencontrez un défi où le div interne s'affiche avec une hauteur de 0px. Ce comportement est attribué à l'alignement vertical par défaut des éléments HTML. Pour résoudre ce problème, vous devez configurer la propriété d'affichage du div parent pour activer l'alignement vertical.

Solution :

Pour forcer le div interne à correspondre à la hauteur du parent , modifiez le CSS comme suit :

#outer {
  display: flex;
  /* Add necessary prefixes for cross-browser compatibility. */
}

Supplémentaire Considérations :

• Préfixes : Il est important d'ajouter les préfixes de fournisseur CSS appropriés pour la compatibilité entre navigateurs.
• Internet Explorer : En raison de sa prise en charge limitée de Flexbox, Internet Explorer 9 et versions antérieures peuvent ne pas afficher la mise en page correctement.
• Alignement : Par défaut, la propriété align-items du parent est définie sur "stretch", ce qui signifie que les éléments enfants, y compris le div interne, s'aligneront et s'étireront verticalement pour remplir l'espace disponible. Si vous avez besoin d'un alignement différent pour le div enfant, vous pouvez utiliser la propriété align-self.

Exemple en direct :

Cliquez sur le lien suivant pour un live Démonstration JSFiddle : https://jsfiddle.net/bv71tms5/2/

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!