Comment puis-je atteindre une hauteur d'élément enfant de 100 % au sein d'un parent à hauteur variable ?

Atteindre 100 % de la taille de l'enfant chez un parent variable

Dans une mise en page à plusieurs colonnes, en veillant à ce que la colonne de navigation s'aligne verticalement avec le contenu principal est crucial. Cependant, sans spécifier la taille du parent, cela peut s'avérer difficile.

Solution :

Utilisez la propriété flex display sur l'élément parent. Cela permet aux enfants de fléchir et de s'étendre verticalement, occupant la hauteur du parent.

.parent {
  display: flex;
}

Propriétés supplémentaires :

• aligner les éléments : étirer ; définit les éléments enfants pour qu'ils s'étirent verticalement à l'intérieur du parent.
• flex-direction: column; aligne les éléments enfants verticalement (valeur par défaut).

Exemple :

.parent {
  display: flex;
  align-items: stretch;
}

.child {
  height: 100%;
  width: 50%;
}

Remarque :

• Les préfixes pour la compatibilité entre navigateurs sont recommandés.
• S'assurer que le parent L'élément a une certaine hauteur, ce qui est crucial pour un bon alignement vertical.

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!