Comment faire en sorte qu'un enfant Div occupe la hauteur restante de son parent sans positionnement absolu ?

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

Introduction

Dans le développement frontend, allouer de l'espace aux éléments dans un conteneur div peut être une pratique courante défi. Un scénario consiste à faire en sorte qu'un div enfant occupe la taille restante de son parent, en particulier lorsque la taille du parent est connue mais que celle de l'enfant ne l'est pas. Cet article explique comment y parvenir sans recourir au positionnement absolu.

Utilisation des techniques CSS

• Grid Layout : en attribuant une propriété grid-template-rows à le conteneur avec une seule valeur (par exemple, 100px), les divs enfants rempliront automatiquement l'espace restant verticalement.
• Flexbox : à l'aide de display: flex et flex-direction: column styles sur le conteneur, définissez la propriété flex-grow sur le div enfant sur 1. Cela demande efficacement à l'enfant de agrandir et occuper tout l'espace restant.
• Approche basée sur une calculatrice : Si la taille du premier enfant est connue, la taille du deuxième enfant peut être calculé à l'aide de calc(100% - first_child_height) en CSS.
• Propriété de débordement : lorsque la propriété de débordement du conteneur est définie sur cachée, il recadre efficacement les divs enfants aux dimensions du conteneur. En définissant la hauteur du div enfant à 100 %, il s'agrandira pour remplir l'espace disponible.

Exemple de code

Référez-vous aux extraits CSS et HTML fournis pour des exemples détaillés démontrant ces techniques. Notez que la propriété max-content peut également être considérée comme une option de dimensionnement, éliminant ainsi le besoin de hauteurs fixes dans certains cas.

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!