Comment puis-je faire en sorte qu'un enfant Div remplisse l'espace restant de son conteneur parent ?

Agrandissement de la hauteur div pour occuper l'espace parent restant

Il est courant de faire en sorte qu'un enfant div occupe l'espace restant de son conteneur parent sans définir explicitement sa hauteur. Voici plusieurs méthodes pour y parvenir :

1. Disposition en grille

.container {
  display: grid;
  grid-template-rows: 100px;
}

Cette méthode crée une disposition en grille avec une ligne de 100 px de hauteur. Le div enfant remplira l'espace restant.

2. Flexbox

.container {
  display: flex;
  flex-direction: column;
}

.container .down {
  flex-grow: 1;
}

Flexbox permet de définir flex-grow sur 1 sur le div enfant, le faisant s'étendre pour remplir l'espace vertical restant.

3. Calcul de la taille

.up {
  height: 100px;
}

.down {
  height: calc(100% - 100px);
}

Cette méthode utilise le calcul de la hauteur CSS pour soustraire la taille du premier enfant de 100 %, donnant ainsi au deuxième enfant la taille restante.

4 . Débordement caché

.container {
  overflow: hidden;
}

.down {
  height: 100%;
}

Remplacer le comportement d'affichage par défaut en masquant le débordement permet au div enfant de remplir la taille du parent.

5. Max-Content

.container {
  height: 100%;
}

.down {
  height: max-content;
}

La valeur de la propriété Max-content dimensionne le div enfant en fonction de son contenu, occupant efficacement l'espace restant.

Notez que certaines méthodes peuvent avoir des limitations ou un navigateur restrictions de prise en charge. Choisissez la méthode appropriée en fonction de vos besoins spécifiques.

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!