Comment puis-je régler correctement la hauteur d'un conteneur parent avec des enfants absolument positionnés ?

Position absolue et hauteur des parents

Lorsque vous travaillez avec des éléments en position absolue, il devient difficile de déterminer la hauteur de leurs conteneurs parents. Ce problème survient lorsque des éléments enfants sont positionnés de manière absolue ou relative dans un conteneur parent et que vous souhaitez définir une hauteur appropriée pour l'élément parent afin de garantir que ses enfants restent dans ses limites.

Pour résoudre ce problème, il est essentiel pour reconnaître que les éléments positionnés de manière absolue sont supprimés du flux de documents, les rendant incapables d'influencer les dimensions de leurs conteneurs parents. Si la définition de « position : absolue » pour les éléments enfants est une exigence, envisagez d'utiliser JavaScript pour ajuster dynamiquement la hauteur du conteneur parent une fois les éléments enfants rendus. Cela implique d'utiliser JavaScript pour calculer la hauteur des éléments enfants positionnés de manière absolue, puis d'appliquer cette valeur à la hauteur du conteneur parent.

Cependant, une solution plus simple existe en utilisant la propriété float et les marges pour imiter le positionnement absolu tout en conserver les éléments enfants dans le flux de documents. En définissant une valeur float pour les éléments enfants (par exemple, float: left) et en incorporant des marges, vous pouvez obtenir le positionnement souhaité. De plus, définir overflow: Hidden sur le conteneur parent ou implémenter toute autre technique clearfix force sa hauteur à s'étendre pour correspondre à la taille de ses éléments enfants.

Voici un exemple de la façon d'obtenir ce positionnement en utilisant CSS :

article {
  position: relative;
  overflow: hidden;
}

.one {
  position: relative;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  background: red;
  width: 30px;
  height: 30px;
}

.two {
  position: relative;
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  background: blue;
  width: 30px;
  height: 30px;
}

En appliquant ces techniques, vous pouvez contrôler efficacement le positionnement des éléments enfants et maintenir la hauteur appropriée pour leurs conteneurs 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!