Comment faire des blocs de même hauteur ?

Astucecss

Publié par le , mis à jour le (87552 lectures)

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