Comment faire des blocs de même hauteur ?

Astuce par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (83258 lectures)
Tags : css, tableaux, table-cell, hauteur, colonnes, explorer, flexbox

Les principes de hauteur et de verticalité sont souvent problématiques en CSS. Il n'existe pas toujours  de solution miracle et il faut adapter une technique à ses besoins.

Dans les faits, pour obtenir des "colonnes de même hauteur", les solutions peuvent se révéler très simples mais dépendent essentiellement du support navigateur  :

  1. Vous devez supporter des anciens navigateurs tels que Internet Explorer 9 ou moins. Dans ce cas, il est tout à fait possible d'obtenir le rendu de cellules de tableau, donc des éléments contigus de même hauteur, à l'aide de la propriété display associée à la valeur table-cell. C'est une valeur prévue par CSS2.1 depuis plus de 10 ans et qui suffit à répondre à la problématique de manière simplissime. Voici un lien permettant de découvrir les possibilités avancées de la propriété display.
  2. Vous n'avez plus à vous soucier de IE9. Pour le coup, de nouvelles horizons s'offrent à vous grâce au positionnement CSS3 Flexbox. La méthode et les résultats seront bien mieux adaptés à un Web moderne, et vous pourrez même réaliser des grilles de mise en pages responsive facilement.

Bonne intégration !

Ressources