Faire deux divs flottants de la même hauteur en html / css

introduction

Atteindre une hauteur égale dans les divs peut être difficile, surtout lorsqu'ils sont parallèles parallèles et ont des longueurs de contenu différentes. Une solution de contournement courante consiste à utiliser des tables, mais cette approche peut ne pas être sémantiquement appropriée.

Utilisation de CSS pour créer des divs de hauteur égale

pour obtenir une hauteur égale sans utiliser des tables, CSS fournit plusieurs techniques. Une approche consiste à définir un grand rembourrage inférieur, à animer ce rembourrage avec une marge inférieure négative, et à entourant les divs avec un conteneur avec un débordement caché. débordement: caché; Largeur: 100%; } # Left-Col { flottant: à gauche; Largeur: 50%; Color en arrière-plan: orange; Padding-Bottom: 500EM; marge-fond: -500EM; } # Coll droit { flottant: à gauche; Largeur: 50%; marge-droite: -1px; / * pour la compatibilité ie * / Border-Left: 1px noir solide; Color d'arrière-plan: rouge; Padding-Bottom: 500EM; marge-fond: -500EM; }

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

Cette approche oblige essentiellement les deux divs à avoir la même hauteur, même s'ils contiennent différentes quantités de contenu. Le grand rembourrage du fond et la marge négative s'annulent mutuellement, permettant aux Divs de prendre uniquement l'espace vertical dont ils ont besoin. Le conteneur avec un débordement caché garantit que tout contenu excessif n'est pas visible.

#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;
}