Comment faire des blocs de même hauteur ?

Astuce par (Stilofoliophile, Strasbourg)
Mis à jour le . 49647 lectures.
Tags : css, tableaux, hauteur, colonnes, explorer

Le principe de hauteur et de verticalité est souvent problématique en CSS. Il n'existe toujours pas de solution miracle et il faut adapter une technique à ses besoins.

Dans les faits, pour obtenir des "colonnes de même hauteur", la solution est très simple mais doit tenir en plusieurs points en raison du développement de certains navigateurs  :

  1. 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.
  2. nous avons malheureusement besoin d'un point 2, puisqu'il exist(ait) un navigateur qui ne tenait pas compte de cette valeur : Internet Explorer. Jusqu'à IE7, ce navigateur ne comprend pas la valeur table-cell.
  3. puisque nous avons encore à faire à IE7, voire IE6, nous devons donc bidouiller pour obtenir ce que l'on souhaite. Cela passe soit par l'usage de "vrais" tableaux et cellules HTML, ou par d'autres astuces plus ou moins laborieuses.

Au final, la solution est plus longue qu'annoncée... mais à qui la faute ?

A l'heure actuelle, et en raison des déficiences ou obsolescences des versions 6 et 7 d'Internet Explorer, la solution la plus robuste demeure l'emploi de tableaux de mise en page, à condition qu'ils soient bien conçus et non enchevêtrés. C'est ce que nous conseillons.

Une alternative simple à mettre en œuvre est celle des "colonnes factices" ("faux-columns") dont le principe repose sur une couleur de fond adaptée :
http://pompage.net/pompe/colonnesfactices/

À noter que certains gabarits d'Alsacréations permettent aux colonnes de s'étirer :
Gabarits HTML et CSS simples

Ce blog anglais a regroupé différentes techniques :
http://www.ejeliot.com/blog/61

Notez également qu'un tutoriel complet explique comment réaliser un design en CSS avec deux colonnes de même hauteur :
Design XHTML/CSS complet avec 2 colonnes de même hauteur

Ressources