Comment puis-je agrandir automatiquement une division parent pour l'adapter à la hauteur de son contenu enfant tout en empêchant les barres de défilement horizontales ?

Agrandissement d'une division parent pour s'adapter à la taille de l'enfant

Dans le développement Web, il est souvent nécessaire de créer des éléments parents qui s'agrandissent pour s'adapter à la hauteur de leurs éléments enfants. Ce scénario se produit lorsque vous travaillez avec du contenu dynamique et des conceptions réactives où la hauteur des éléments enfants fluctue.

Un exemple courant est une disposition à deux colonnes où les divs enfants déterminent la hauteur du div parent. En développant le div parent en conséquence, vous vous assurez que l'intégralité du contenu est visible sans barres de défilement horizontales.

Pour y parvenir, définissez la propriété de débordement du div parent sur auto. Cela permet au parent de s'étendre verticalement à mesure que le contenu enfant grandit.

#parent {
  overflow: auto;
}

Problème de barre de défilement horizontale

Si la largeur du contenu enfant s'étend au-delà de la fenêtre du navigateur, le parent div avec débordement : auto introduira une barre de défilement horizontale. Pour éviter cela, la barre de défilement doit être ajoutée au niveau de la page.

Solution 1 : Débordement sur le parent

Pour certains navigateurs, paramètre overflow-x: Hidden; sur le div parent peut éliminer la barre de défilement horizontale tout en permettant au parent de se développer verticalement.

#parent {
  overflow: auto;
  overflow-x: hidden;
}

Solution 2 : Propriétés d'affichage

Vous pouvez également utiliser l'affichage propriétés pour créer une disposition de type tableau. Définissez la propriété d'affichage du div parent sur table et la propriété d'affichage des div enfants sur table-row. Cette approche garantit que le parent se développe pour s'adapter à ses lignes (divs enfants) sans créer de barre de défilement horizontale.

#parent {
  display: table;
}

#childRightCol, #childLeftCol {
  display: table-row;
}

Ces solutions fournissent des moyens efficaces d'étendre un div parent en fonction de la hauteur de ses éléments enfants, tout en empêchant barres de défilement horizontales indésirables au niveau des parents.

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!