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

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