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