des colonnes avec la même hauteur avec le framework Foundation

Publié le 07 janvier 2014 par Mike Lecomte

Foundation est un framework css vraiment performant permettant de créer des interfaces fonctionnelles et responsives, que vous pouvez découvrir ici : http://foundation.zurb.com/

Lorsque vous créez vos différentes colonnes en utilisant la grid, il se peut que vous ayez besoin à un moment donné que une 2 ou plusieurs colonnes aient la même hauteur. Voici une solution simple élégante, tout comme ce framework !

La solution proposée est d’utiliser des data-attributes afin d’indiquer quelles sont les blocs où effectuer la modification, et un brin de javascript pour faire fonctionner la magie.

Les attributs : data-match-height et data-height-watch servent à définir le parent des éléments qui doivent avoir la même height, et à définir les blocs enfants qui doivent avoir la même hauteur

exemple html XHTML <div class="row" data-match-height> <div data-height-watch class="small-3 columns" style="background: pink;"> <p>Some text...</p> </div> <div data-height-watch class="small-6 columns" style="background: orange;"> <p>Some text...</p> <img src="http://placehold.it/300x300"> </div> <div data-height-watch class="small-3 columns" style="background: lightblue;"> <p>Some text...</p> </div> </div> <br> <div class="row" data-match-height> <div class="small-12"> <ul class="small-block-grid-3"> <li data-height-watch style="background: pink; height: 100px;"> <p>Some text...</p> </li> <li data-height-watch style="background: orange; height: 120px;"> <p>Some text...</p> </li> <li data-height-watch style="background: lightblue; height: 140px;"> <p>Some text...</p> </li> <li data-height-watch style="background: purple; height: 150px;"> <p>Some text...</p> </li> <li data-height-watch style="background: gray; height: 100px;"> <p>Some text...</p> </li> <li data-height-watch style="background: pink; height: 200px;"> <p>Some text...</p> </li> </ul> </div> </div>

123456789101112131415161718192021222324252627282930313233343536373839 <div class="row"data-match-height>  <div data-height-watchclass="small-3 columns"style="background: pink;">  <p>Some text...</p>  </div>  <div data-height-watchclass="small-6 columns"style="background: orange;">  <p>Some text...</p>  <img src="http://placehold.it/300x300">  </div>  <div data-height-watchclass="small-3 columns"style="background: lightblue;">  <p>Some text...</p>  </div></div> <br> <div class="row"data-match-height>  <div class="small-12">  <ul class="small-block-grid-3">  <li data-height-watchstyle="background: pink; height: 100px;">  <p>Some text...</p>  </li>  <li data-height-watchstyle="background: orange; height: 120px;">  <p>Some text...</p>  </li>  <li data-height-watchstyle="background: lightblue; height: 140px;">  <p>Some text...</p>  </li>  <li data-height-watchstyle="background: purple; height: 150px;">  <p>Some text...</p>  </li>  <li data-height-watchstyle="background: gray; height: 100px;">  <p>Some text...</p>  </li>  <li data-height-watchstyle="background: pink; height: 200px;">  <p>Some text...</p>  </li>  </ul>  </div></div>

et le javascript qui va bien, à inclure sur vos pages, après app.js en fin de page

JavaScript $("[data-match-height]").each(function() { var parentRow = $(this), childrenCols = $(this).find("[data-height-watch]"), childHeights = childrenCols.map(function(){ return $(this).height(); }).get(), tallestChild = Math.max.apply(Math, childHeights); childrenCols.css('min-height', tallestChild); });

12345678910 $("[data-match-height]")each(function(){   varparentRow=$(this),  childrenCols=$(this)find("[data-height-watch]"),  childHeights=childrenColsmap(function(){return$(this)height();})get(),  tallestChild=Mathmaxapply(Math,childHeights);   childrenColscss('min-height',tallestChild); });

Pas encore testé de mon côté, mais je dois le tester sous peu ! je vous tiens informé !