Fonction jQuery pour avoir la même hauteur sur des boîtes

Attention ! Cet article a plus de 1 an (643 jours), ce qui signifie qu'il n'est pas forcément à jour !

Il existe quelques façons pour ajuster des hauteurs de boîtes pour qu’elles soient semblables. Cependant, souvent ces méthodes nécessites une hauteur fixe, du CSS3 qui n’est pas supporté sous différents navigateurs, etc. Voici une fonction en jQuery qui est supportée sur tous les navigateurs ainsi que dans une structure responsive.

MO

 function adjustHeight(selecteur) {
    var heights = [];
    var maxHeight;
    $(selecteur).each(function (index) {
        $(this).attr('style', '');
        heights[index] = $(this).height();
    });

    maxHeight = Math.max.apply(null, heights);
    $(selecteur).height(maxHeight);
}

adjustHeight(".adjust .inner");

$(window).on("resize", function (event) {
    adjustHeight(".adjust .inner");
});

Explications

Nous n’avons qu’à tout simplement appeler la fonction adjustHeight en passant les sélecteurs que l’on veut ajuster.

Ce que la fonction fait, c’est de créer un Array, de passer en revue les sélecteurs, d’en ressortir sa hauteur et l’ajouter au Array. Une fois terminé, nous affectons la variable maxHeight avec la hauteur trouvée la plus élevé. La fonction reprend alors tous les sélecteurs et leur assigne cette même hauteur.

Pour le responsive, j’ai dupliqué la fonction et l’ai mis dans un event resize.

Autres façons

Une page qui donne quelques façons : http://www.ejeliot.com/blog/61

Sinon vous pouvez aussi utiliser du table-cell:

<div class="row" style="display: table; border: 1px solid black;">
    <div class="span6" style="display: table-cell; border: 1px solid black;">
        <div class="well">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
    <div class="span6" style="display: table-cell; border: 1px solid black;">
        <div class="well">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
</div>

Catégories :

Javascript

Commentaires

  • cokpit

    Wow tu viens de me sauver la vie…. bon … tu m’as surtout sauver d’un gros casse-tête.

    • René Domingue

      Ça fait plaisir :D

  • Charles

    Effectivement j’aime bien la fonction, mais effectivement aussi il y a certainement moyen de faire sans javascript

Ajouter un commentaire

Vous devez entrer votre nom.
Vous devez entrer votre courriel.
Un commentaire est nécessaire.
Le captcha est nécessaire.