Comment puis-je donner à deux divisions flottantes la même hauteur en utilisant uniquement CSS ?

Faire en sorte que deux divisions flottantes aient la même hauteur en HTML/CSS

Introduction

Atteindre l'égalité la hauteur des divs peut être difficile, surtout lorsqu'ils sont côte à côte et ont des longueurs de contenu différentes. Une solution de contournement courante consiste à utiliser des tableaux, mais cette approche peut ne pas être sémantiquement appropriée.

Utiliser CSS pour créer des divisions de même hauteur

Pour obtenir une hauteur égale sans utiliser de tableaux, CSS propose plusieurs techniques. Une approche consiste à définir un grand remplissage inférieur, à annuler ce remplissage avec une marge inférieure négative et à entourer les divs avec un conteneur avec un débordement caché.

Mise en œuvre

Pour démontrer cette technique , considérez le code CSS suivant :

#container {
  overflow: hidden;
  width: 100%;
}

#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* for IE compatibility */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

Dans le HTML, créez le conteneur div et deux enfants divs :

<div>

Cette approche oblige essentiellement les deux divs à avoir la même hauteur, même si elles contiennent des quantités de contenu différentes. Le grand rembourrage inférieur et la marge négative s'annulent, permettant aux divs d'occuper uniquement l'espace vertical dont ils ont besoin. Le conteneur avec débordement caché garantit que tout contenu excédentaire n'est pas visible.

Conclusion

Cette technique CSS fournit un moyen sémantiquement correct de créer des divs flottants de même hauteur en HTML/ CSS. Il imite efficacement le comportement d'une table sans introduire de balisage inutile.

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!