Egaliser la hauteur de bloc ou de colonnes

Ce script jQuery permet d'égaliser la hauteur d'un groupe de blocs ou de colonnes, ou de n'importe quels éléments disposant d'une classe css commune.

Il suffit d'appliquer une classe css commune au groupe de blocs qu'on souhaite égaliser (avec panels ou views, ou en surchargant le template du bloc) puis de mettre le script ci-dessous dans le fichier script.js (ou autre) de son thème.

/**
 * Equal Heights Plugin
 * Equalize the heights of elements. Great for columns or any elements
 * that need to be the same size (floats, etc).
 *
 * Version 1.0
 * Updated 12/10/2008
 *
 * Copyright (c) 2008 Rob Glazebrook (cssnewbie.com)
 *
 * Usage: $(object).equalHeights([minHeight], [maxHeight]);
 *
 * Example 1: $(".cols").equalHeights(); Sets all columns to the same height.
 * Example 2: $(".cols").equalHeights(400); Sets all cols to at least 400px tall.
 * Example 3: $(".cols").equalHeights(100,300); Cols are at least 100 but no more
 * than 300 pixels tall. Elements with too much content will gain a scrollbar.
 *
 */

(function($) {
    $.fn.equalHeights = function(minHeight, maxHeight) {
        tallest = (minHeight) ? minHeight : 0;
        this.each(function() {
            if($(this).height() > tallest) {
                tallest = $(this).height();
            }
        });
        if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
        return this.each(function() {
            $(this).height(tallest).css("overflow","auto");
        });
    }
})(jQuery);

/** Redimensionnement de la hauteur au chargement de la page */
(function($){$(document).ready(function() {
    /** On égalise maintenant la hauteur des blocs */
    $('.equalheight3 .flocon-block-body').equalHeights().css('overflow', 'hidden');
    $('.equalheight2 .flocon-block-body').equalHeights().css('overflow', 'hidden');
    $('.equalheight1 .flocon-block-body').equalHeights().css('overflow', 'hidden');
    /** Calcul de la hauteur du bloc Photos */
    var heightPhotos = 0 ;
    heightPhotos = $('.equalheight1 .flocon-block-body').height() + $('.equalheight2 .flocon-block-body').height() - $('.equalheight4 .block-search .flocon-block-body').height() + 7;
    $('.equalheight4 .block-media-gallery .flocon-block-body').height(heightPhotos);
    
    });
})(jQuery);

/** Redimensionnement de la hauteur au redimensionnement de la fenêtre du navigateur */
(function($){$(window).resize(function() {
    /** Réinitialisation de la hauteur des blocs en auto */
    $('.equalheight1 .flocon-block-body').height('auto');
    $('.equalheight2 .flocon-block-body').height('auto');
    $('.equalheight3 .flocon-block-body').height('auto');
    /** et on recalcule les hauteurs de blocs pour qu'elles soient égales*/
    $('.equalheight3 .flocon-block-body').equalHeights().css('overflow', 'hidden');
    $('.equalheight2 .flocon-block-body').equalHeights().css('overflow', 'hidden');
    $('.equalheight1 .flocon-block-body').equalHeights().css('overflow', 'hidden');
    
    var heightPhotos = 0 ;
    heightPhotos = $('.equalheight1 .flocon-block-body').height() + $('.equalheight2 .flocon-block-body').height() - $('.equalheight4 .block-search .flocon-block-body').height() + 7;
    $('.equalheight4 .block-media-gallery .flocon-block-body').height(heightPhotos);
    
    });
})(jQuery);

Dans cet exemple, on égalise la hauteur des blocs au chargement de la page, et au redimensionnement de la fenêtre du navigateur. On égalise la hauteur de 3 groupes de blocs auxquels on leur a appliqué une classe css parente (.equalheight1, .equalheight2, .equalheight3) car tous les blocs disposent de la même classe css.

Enfin, on calcule la hauteur d'un bloc (heightPhotos) placée dans une zone verticale afin d'égaliser sa hauteur avec 2 groupes de blocs (moins la hauteur du bloc de recherche situé au-dessus de lui).

Le module Equal heights jQuery implémente cette fonctionnalité (en partie) avec une interface d'administration.

source : http://www.cssnewbie.com/equalheights-jquery-plugin/