Comment puis-je faire en sorte qu'un parent `` s'agrandisse verticalement pour l'adapter à ses éléments enfants?-tutoriel CSS-php.cn

How Can I Make a Parent `` Expand Vertically to Fit its Child Elements?

Développer un parent

Verticalement pour accueillir ses éléments enfants

En HTML, il est souvent nécessaire d'avoir un élément parent qui ajuste dynamiquement sa hauteur pour s'adapter à la hauteur combinée de ses éléments enfants. Par exemple, un parent

peut contenir deux

éléments enfants, chacun avec un contenu différent. Par défaut, le parent

ne prendra que la hauteur de son enfant le plus grand. Il est cependant possible de modifier le CSS du parent

pour permettre l'expansion verticale en fonction de la taille de ses enfants.

Pour y parvenir, la règle CSS suivante peut être appliquée au parent

overflow: auto;

Copier après la connexion

Cette règle indique au navigateur pour ajouter automatiquement une barre de défilement verticale au navigateur parent

si son contenu dépasse la hauteur disponible. Par conséquent, le parent

s'étendra verticalement pour s'adapter à la hauteur accrue de ses éléments enfants.

Problème et résolution de la barre de défilement horizontale

Dans l'exemple donné, il est mentionné que si le contenu enfant dépasse la largeur de la fenêtre du navigateur, le CSS actuel introduit une barre de défilement horizontale sur le parent

. Pour résoudre ce problème et déplacer la barre de défilement au niveau de la page, la propriété CSS suivante peut être ajoutée au champ tag :

body {
  overflow-x: auto;
}

Copier après la connexion

Cela créera une barre de défilement horizontale au niveau de la page, permettant aux utilisateurs de faire défiler horizontalement si le contenu enfant dépasse la largeur de la fenêtre du navigateur.

Solution alternative utilisant le tableau Afficher

Une autre approche pour réaliser une expansion verticale du parent

consiste à utiliser la propriété d'affichage "table" pour le parent et la propriété d'affichage "table-row" pour les éléments enfants. Cela crée une structure de type tableau dans laquelle le parent

agit comme le conteneur de la table et les

enfants agissent comme des lignes de la table. Dans cette approche basée sur un tableau, la hauteur du parent

s'ajustera automatiquement pour s'adapter à la hauteur combinée de ses éléments enfants.

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

Article précédent：Comment puis-je contrôler la hauteur des cellules d’un tableau lorsque le contenu dépasse les dimensions des cellules ? Article suivant：Pourquoi mes variables CSS ne s'animent-elles pas ?

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