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 :
-
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é
displayassociée à la valeurtable-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. - 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 !