Maison >interface Web >tutoriel CSS >Comment puis-je faire en sorte qu'une division enfant occupe la hauteur restante de son parent ?

Comment puis-je faire en sorte qu'une division enfant occupe la hauteur restante de son parent ?

Susan Sarandon
Susan Sarandonoriginal
2024-12-07 05:41:13729parcourir

How Can I Make a Child Div Occupy the Remaining Height of Its Parent?

Comment faire en sorte qu'une division occupe la hauteur restante d'un parent

Considérez le code HTML et CSS suivant :

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

Ici, nous avons un conteneur div avec deux éléments enfants. Le premier enfant (#up) a une taille donnée, tandis que le second (#down) n'en a pas. Comment pouvons-nous faire en sorte que #down occupe la hauteur restante du div conteneur ?

Solution

Plusieurs méthodes peuvent y parvenir, en fonction de la compatibilité du navigateur et si #up a un hauteur fixe.

Options :

1. Disposition de la grille :

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

2. Disposition de la Flexbox :

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

3. Hauteur calculée :

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

4. Débordement caché :

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

Le choix de la méthode dépend des exigences spécifiques et de la prise en charge du navigateur. Notez que CSS inclut désormais la valeur de la propriété max-content pour le dimensionnement, qui peut convenir dans certains scénarios.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn