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
Libérer: 2024-12-07 05:41:13
original
783 Les gens l'ont consulté

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 :

1

<div>

Copier après la connexion

1

2

3

#container { width: 300px; height: 300px; border:1px solid red;}

#up { background: green; }

#down { background:pink;}

Copier après la connexion

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 :

1

2

3

4

.container {

  display: grid;

  grid-template-rows: 100px;

}

Copier après la connexion

2. Disposition de la Flexbox :

1

2

3

4

5

6

7

.container {

  display: flex;

  flex-direction: column;

}

.container .down {

  flex-grow: 1;

}

Copier après la connexion

3. Hauteur calculée :

1

2

3

4

5

6

.container .up {

  height: 100px;

}

.container .down {

  height: calc(100% - 100px);

}

Copier après la connexion

4. Débordement caché :

1

2

3

4

5

6

.container {

  overflow: hidden;

}

.container .down {

  height: 100%;

}

Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal