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

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é !