Set height with zurb-foundation grid

Question

I\'m using zurb-foundation.

Is there a way to set two grid same height, if they are horizontally arranged. And if they are vertically arranged I want to set different he

Answer 1

The best way to do this is using a simple JS remedy. I have been using Foundation for years and this is my fail-safe code.

<script>
$(window).load(function() {
    //call the equalize height function
    equalHeight($("div.small-item"));

    //equalize function
    function equalHeight(group) {
        tallest = 0;
        group.each(function() {
            thisHeight = $(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        group.height(tallest);
    }
});
</script>

This will give all the div classes of "small-item" a equal height column. based on the tallest columns height:

Answer 2

Media queries will work for deciding what action to take between the breakpoint 768px. If you wish to keep two horizontal divs the same height no matter the content of both or even as you resize the window - by which you may cause the content on either side to grow unequally - you'll probably need to use javascript

I used one in my site, it's very straightforward and probably not completely safe but here's my solution:

$(window).resize(function () {
  var leftblock = $('#left');
  var rightblock = $('#right');
  leftblock.height('auto');
  rightblock.height('auto');
  if ($(window).width() > 767)
  {
    var maxHeight = Math.max(leftblock.height(), rightblock.height());
    leftblock.height(maxHeight);
    rightblock.height(maxHeight);
  }
});

It resets the heights to auto whenever the window is resized or on load and if the window width is beyond the 768 breakpoint, it will set both heights to the larger of the two