Attention ! Cet article a plus de 1 an (2748 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.
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>