Comment faire en sorte qu'une division enfant flottante s'étende jusqu'à la hauteur de son parent ?

Agrandir la hauteur de la division enfant à la hauteur du parent

Dans une mise en page Web où les éléments parent et enfant sont positionnés côte à côte, il est souvent nécessaire pour s'assurer que leurs hauteurs sont égales. Ceci permet d'éviter que l'élément parent apparaisse étiré ou compressé en raison du contenu de l'élément enfant.

Problème :

Vous avez un div parent avec deux div enfants flottants. (enfant-gauche et enfant-droite). Lorsque le contenu de child-left augmente, la hauteur du div parent s'ajuste en conséquence. Cependant, la hauteur du droit de l'enfant reste inchangée.

Solution :

Pour rendre la hauteur du droit de l'enfant égale à celle de son parent, appliquez le CSS suivant styles:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.child-left {
    float: left;
}

.child-right {
    background: green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

• .parent:

  • overflow: caché : empêche le contenu du div parent de déborder au-delà de ses limites.
  • position : relative : définit le div parent comme contexte de positionnement relatif pour son enfant divs.

• .child-left:

  • float: left : positionne l'enfant-gauche vers la gauche dans le parent.

• .child-right :

  • fond : vert : couleur facultative à des fins de démonstration.
  • hauteur : 100 % : définit la hauteur du droit de l'enfant pour qu'elle corresponde à celle de son parent.
  • largeur : 50 % : spécifie la largeur du droit de l'enfant à 50 % du parent.
  • position : absolue : positionne le droit de l'enfant de manière absolue au sein du parent.
  • droit : 0 : aligne le droit de l'enfant à droite du parent.
  • top : 0 : aligne la droite de l'enfant en haut du parent.

En combinant ces styles, vous pouvez obtenir l'expansion en hauteur souhaitée de l'enfant droit pour qu'il corresponde à son parent, quel que soit le contenu de l'enfant gauche.

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!