Comment puis-je définir la hauteur d'un conteneur pour encapsuler des enfants parfaitement positionnés ?

Hauteur du conteneur avec des enfants en position absolue

Dans cette situation, où les conteneurs n'ont que des enfants en position absolue/relative, déterminer la hauteur du conteneur à garder ses enfants contenus peuvent être difficiles.

En CSS, les éléments positionnés de manière absolue sont exemptés du flux de documents régulier. Par conséquent, leurs dimensions n'ont pas d'impact sur les dimensions de leurs parents.

Solution possible avec JavaScript :

Si le maintien d'un positionnement absolu est essentiel, vous pouvez utiliser JavaScript pour accomplir la tâche. effet recherché. Plus précisément, vous pouvez écrire un script qui récupère la hauteur des enfants en position absolue après leur rendu et utilise cette valeur pour ajuster la hauteur du parent.

Solution alternative avec Float et Overflow :

Une approche alternative consiste à utiliser float: left/float:right et margins pour imiter le positionnement absolu tout en préservant les enfants dans le flux de documents. Pour s'adapter à la taille des enfants, vous pouvez appliquer overflow: caché au conteneur parent (ou utiliser d'autres techniques clearfix).

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!