Parfois dans nos sites on a besoin d'obtenir des colonnes de hauteur égale. Dans l'état actuel de l'art c'est un peu compliqué à obtenir via CSS, c'est pour ça que des hacks et des techniques pas toujours au top ont été inventés pour palier à ce problème. En utilisant display:table on a une méthode pas mal mais ça n'est pas encore complètement cross-browser. Quelques lignes de JavaScript peuvent nous permettre d'arriver à nos fins simplement, d'ailleurs d'autres se sont déjà penchés sur le problème. Une petite recherche Google sur les termes javascript equal height vous fera voir pas mal d'approches différentes dont certaines un peu barbares :o Une des méthodes les plus clean est celle du plug-in jQuery des devs de Filament Group.
J'ai une approche presque identique sauf qu'à la place d'initialiser une variable à 0 et de boucler sur les divs concernés pour trouver la hauteur la plus importante, je boucle sur les divs concernés et je stocke leur hauteur dans un tableau, puis je récupère la plus grande valeur du tableau obtenu via la méthode max de l'objet global Math. Cette façon de faire est intéressante, vous allez voir. Pour l'exemple je passe par la librairie jQuery histoire d'économiser des lignes de codes et pour calculer la hauteur des éléments sans se prendre la tête avec des clientHeight ou des offsetHeight.
Voici le code en light :
var heights = [];
$('.my-divs').each(function(){ heights.push( $(this).height() ); });
var max_height = Math.max.apply(null, heights);
$('.my-divs').css( {'min-height': max_height+'px'} );Deux choses intéressantes ici.
D'abord le fait de pouvoir passer un tableau en argument à la méthode max qui normalement attend des integers, j'avais lu ça dans Fast JavaScript Max/Min et dans la réintroduction à JavaScript il y a un bout de temps. Dans notre exemple apply() prend deux arguments, un objet et un tableau, ici null et heights. Ce qu'il faut savoir ici c'est que lorsque l'objet du premier argument est set à null c'est l'objet global qui est utilisé. Donc ce qui se passe : apply() invoque max() comme si c'était une méthode de l'objet global (Math ici) en lui passant en argument les éléments du tableau heights. Bing, c'est beau et propre.
L'autre chose intéressante est de définir la hauteur maximum ainsi obtenue non pas sur la propriété height des éléments concernés mais sur leur propriété min-height et ce dans le but de ne pas se retrouver avec un layout foireux dans le cas d'un resize du texte par l'utilisateur. L'inconvénient est que notre ami IE6 ne supporte pas min-height, le plug-in de Filament Group le gère, pas moi car j'en ai trop marre d'IE6. Leur plug-in fait encore un truc intéressant en transformant les pixels en ems, je n'ai pas jugé ça utile dans mon cas.
Joint