parvenir à l'égalité de la hauteur des colonnes dans un réactif / mise en page flexible

Cette question est déjà assez vieux, mais je n'ai pas de tomber sur la bonne solution pour moi-même jusqu'à présent.

Une solution de travail serait un plugin jQuery qui fait quelque chose comme le réglage de la hauteur des colonnes à "auto", la mesure qui est la plus haute et de définir les colonnes à la hauteur. Quelque chose le long des lignes de ce:

$.fn.eqHeights = function (options) {
  var $el = $(this),
    $window = $(window),
    opts = $.extend({}, $.fn.eqHeights.defaults, options);
  if ($el.length > 0 && !$el.data('eqHeights')) {
    $(window).bind('resize.eqHeights', function () {
      $el.eqHeights(opts);
    });
    $el.data('eqHeights', true);
  }
  return $el.each(function () {
    var children = $(this).find(opts.childrenSelector);
    if (!(opts.minWidth) || opts.minWidth < $window.width()) {
      var curHighest = 0;
      children.each(function () {
        var $el = $(this),
          elHeight = $el.height('auto').height();
        if (elHeight > curHighest) {
          curHighest = elHeight;
        }
      }).height(curHighest);
    } else {
      children.height('auto');
    }
  });
};
$.fn.eqHeights.defaults = {
  childrenSelector: '*',
  minWidth: ''
};

Vous pouvez voir ce en action ici: [email protected]

Le plugin prend en charge deux options:

• childrenSelector: (Facultatif) Le sélecteur, pour les enfants, qui devraient obtenir la même hauteur sont repris. Par défaut *, alors tout votre parent est amené à égale hauteur. Mis à > de choisir seulement les enfants directs ou quelque chose d'autre pour obtenir l'effet désiré.
• minWidth: (Facultatif) Le minimum de la largeur de la fenêtre d'affichage au-dessus de la largeur du Plugin est de travail et de calculer des hauteurs égales pour le sélectionné enfants. Au-dessous de leur hauteur est définie à auto. Cela est très pratique si vos conteneurs sont disposés au-dessous les uns des autres et ne devrait pas avoir une hauteur égale. Vide et inactif par défaut.

Alors que cela fonctionne très bien dans tous les navigateurs avec qui j'ai testé, c'est un très hackish solution, alors peut-être que quelqu'un ici peut proposer quelque chose de mieux. J'ai pensé à copier les colonnes et leurs wrapper pour conteneur caché dans le document, mais ce n'est pas moins propre et produit un plus grand encombrement.

OriginalL'auteur bfncs

J'ai écrit un petit plugin jQuery pour cela: http://github.com/jsliang/eqHeight.coffee/

Testé sur Chrome, Firefox et IE9 et cela fonctionne pour moi.

OriginalL'auteur jsliang

J'ai piraté la solution de la boundaryfunctions de la réponse à prendre en considération responsive modèles sur lesquels les panneaux de redistribution au-dessus les uns des autres.
En cochant contre le premier décalage.en haut, j'ai été en mesure de détecter l'orientation des panneaux et redimensionner leurs .panel-body élément ou affecter une auto de hauteur pour redistribué les panneaux.

(function($) {
    $.fn.eqHeights = function() {
        var el = $(this);
        if (el.length > 0 && !el.data('eqHeights')) {
            $(window).bind('resize.eqHeights', function() {
                el.eqHeights();
            });
            el.data('eqHeights', true);
        }
        var panels = el.find(".panel-body");
        var fistoffset = panels.first().offset();
        var curHighest = 0;
        return panels.each(function() {
            var thisoffset = $(this).offset();
            var elHeight = $(this).height('auto').height();
            if(thisoffset.top==fistoffset.top){
                if (elHeight > curHighest) {
                    curHighest = elHeight;
                }
            }else{
                curHighest = "auto";
            }
        }).height(curHighest);
    };
}(jQuery));

$('.match_all').eqHeights();

Exemple ici: http://bootply.com/render/104399

OriginalL'auteur Andy Gee

J'ai eu le même problème. Après quelques recherches, j'ai sélectionné le faux colonne technique. Consultez ce blog post que j'ai écrit sur la façon de le faire fonctionner dans un responsive design.

Réactif hauteur (hauteur égale) des colonnes à l'aide de la faux de colonnes technique

OriginalL'auteur Sylvain