Comment puis-je étirer une division enfant jusqu'à la hauteur de son parent de taille inconnue ?

Étirer les divisions d'enfants pour correspondre à la taille des parents

Lorsque vous rencontrez une situation comme celle décrite, où la taille d'une division d'enfant doit correspondre celle de son parent mais la taille du parent est inconnue, une solution peut être trouvée grâce à flexbox.

Pour réaliser une mise à l'échelle verticale de l'enfant div, l'élément parent nécessite le style suivant :

display: flex;

De plus, vous devez ajouter des préfixes de navigateur pour garantir la compatibilité entre navigateurs.

Les éléments d'alignement : stretch; la propriété est également cruciale. Cependant, comme il s'agit de la valeur par défaut des align-items dans les boîtes flexibles, vous n'avez pas besoin de la définir explicitement, sauf si vous avez l'intention d'utiliser une valeur différente.

La propriété align-items de Flexbox affecte les éléments enfants, pas les éléments enfants. élément auquel il est appliqué. Pour définir l'étirement des éléments enfants, vous pouvez utiliser la propriété align-self.

Considérons l'exemple suivant :

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

Dans cet exemple, le div autre-enfant existe uniquement dans le but d'augmenter la taille du parent. De ce fait, le div enfant occupera 100% de la hauteur réglable du parent.

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!