Comment faire en sorte qu'un div occupe la hauteur restante du parent sans positionnement absolu ?

Faire en sorte que la div occupe la hauteur restante du parent sans positionnement absolu

En HTML/CSS, vous rencontrez souvent un scénario dans lequel une div enfant doit occuper la hauteur restante de son conteneur parent sans définir explicitement une hauteur spécifique. Examinons le problème et ses solutions possibles.

Considérez le code HTML/CSS suivant :

<div>

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}

Ici, le div "down" doit occuper l'espace sous le " up" div.

Solution

Il existe plusieurs méthodes pour atteindre ceci :

Grille :

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

Flexbox :

.container {
  display: flex;
  flex-direction: column;
}
.container .down {
  flex-grow: 1;
}

Calcul tion :

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

Débordement :

.container {
  overflow: hidden;
}
.container .down {
  height: 100%;
}

Remarque :

• Pour navigateurs prenant en charge CSS Grid et Flexbox, ces solutions offrent une approche plus élégante.
• La méthode "Overflow" peut être utile lorsque le conteneur parent a une hauteur fixe. Cependant, cela peut provoquer un comportement de défilement inattendu.

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!