Utiliser twitter bootstrap 2.0 – Comment faire des hauteurs de colonne égales?

Voici une solution CSS réactive, basée sur l’ajout d’un grand remplissage et d’une marge négative également importante à chaque colonne, puis sur l’intégralité de la ligne dans une classe avec un dépassement de capacité masqué.

 .col{ margin-bottom: -99999px; padding-bottom: 99999px; background-color:#ffc; } .col-wrap{ overflow: hidden; } 

Vous pouvez le voir travailler sur jsFiddle

modifier

En réponse à une question, voici une variante si vous avez besoin de puits de hauteur égale ou de colonnes de hauteur égale avec des coins arrondis: http://jsfiddle.net/panchroma/4Pyhj/

modifier

En réponse à une question, voici la même technique dans Bootstrap 3, même principe, il suffit de mettre à jour les noms de classe dans la grid Bootstap: http://jsfiddle.net/panchroma/bj4ys/embedded/result/

Essayez quelque chose comme ça (pas très élégant, cependant):

 $('.well').css({ 'height': $('.well').height() }); 

La méthode jQuerys height() renvoie la valeur la plus élevée lorsque plusieurs éléments sont sélectionnés.

Voir le jsFiddle: http://jsfiddle.net/4HxVT/

La méthode height () de jQuery renvoie la valeur du “premier élément dans l’ensemble des éléments correspondants”. La réponse dans http://jsfiddle.net/4HxVT/ ne fonctionne que parce que le premier élément de la ligne est également le plus élevé.

Voici une autre solution basée sur jQuery:

http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

(Via cette réponse: https://stackoverflow.com/a/526316/518535 )

En développant les réponses déjà données, je viens de résoudre ce problème en utilisant jquery et underscore . L’extrait de code ci-dessous égalise la hauteur de mes puits et des alertes qui apparaissent sur une ligne donnée, quel que soit l’endroit où le plus grand apparaît:

 $('.well, .alert').height(function () { var h = _.max($(this).closest('.row').find('.well, .alert'), function (elem, index, list) { return $(elem).height(); }); return $(h).height(); }); 

 $.fn.matchHeight = function() { var max = 0; $(this).each(function(i, e) { var height = $(e).height(); max = height > max ? height : max; }); $(this).height(max); }; $('.match-height').matchHeight(); 

J’ai résolu ceci avec un plugin personnalisé jQuery max:

 $.fn.max = function(selector) { return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get() ); } 

Ici content-box est mon élément de colonne interne, content-container est le wrapper qui contient les colonnes:

 $('.content-box').height(function () { var maxHeight = $(this).closest('.content-container').find('.content-box') .max( function () { return $(this).height(); }); return maxHeight; }) 

Les solutions ci-dessus fonctionnent tous jusqu’à ce que vous ajoutiez de jolis boutons de bootstrap! Comment positionnez-vous les boutons je pensais (oui, c’était mon problème).

J’ai combiné le CSS avec la réponse jquery de Comment pourrais-je forcer une DIV flottante à correspondre à la hauteur d’une autre DIV flottante?

Après un peu de frigging je l’ai eu, ce qui fonctionne avec CSS bien que les boutons ne s’alignent pas, et c’est bien avec jQuery

N’hésitez pas à corriger le bit de ligne de commande CSS 🙂

jQuery:

 $.fn.equalHeights = function (px) { $(this).each(function () { var currentTallest = 0; $(this).children().each(function (i) { if ($(this).height() > currentTallest) { currentTallest = $(this).height(); } }); if (!px && Number.prototype.pxToEm) { currentTallest = currentTallest.pxToEm(); //use ems unless px is specified } // for ie6, set height since min-height isn't supported if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({ 'height': currentTallest }); } $(this).children().css({ 'min-height': currentTallest + 40 // THIS IS A FRIG - works for jquery but doesn't help CSS only }); }); return this; }; $(document).ready(function() { var btnstyle = { position : 'absolute', bottom : '5px', left : '10px' }; $('.btn').css(btnstyle); var colstyle = { marginBottom : '0px', paddingBottom : '0px', backgroundColor : '#fbf' }; $('.col').css(colstyle); $('.row-fluid').equalHeights(); }); 

CSS

 .col { margin-bottom: -99999px; padding-bottom: 99999px; background-color:#ffb; position:relative; } .col-wrap { overflow: hidden; } .btn{ margin-left:10px ; } p:last-child { margin-bottom:20px ; } 

jsfiddle – http://jsfiddle.net/brianlmerritt/k8Bkm/

Voici ma solution avec 2 colonnes (adaptez ceci à plus de colonnes est simple, ajoutez juste plus de conditions). Exécuter l’événement de chargement pour avoir les hauteurs correctes de tous les éléments.

 $(window).on('load', function () { var left = $('.left'); var leftHeight = left.height(); var right = $('.right'); var rightHeight = right.height(); // Width like mobile, the height calculation is not needed if ($(window).width() <= 751) { if (leftHeight > rightHeight) { right.css({ 'height': 'auto' }); } else { left.css({ 'height': 'auto' }); } return; } if (leftHeight > rightHeight) { right.css({ 'height': leftHeight }); } else { left.css({ 'height': rightHeight }); } });