Set height with zurb-foundation grid

问题

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 height.

<div class="row">
<div id="left" class="large-4 columns">
<div id="right" class="large-8 columns">
</div>

For example if the "left" grid has 400px height and the "right" grid has 300px height, I want to set right grid 400px as far as they are horizontal. But in a small display like smartphone they are arranged vertically. In this case, I want to set "right" grid original height(300px).

How can I do it?

回答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:

回答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

来源：https://stackoverflow.com/questions/17717244/set-height-with-zurb-foundation-grid

标签

zurb-foundation