Question

我正在使用zurb-foundation。

如果它们是水平排列的，有没有办法设置两个网格相同的高度。如果它们是垂直排列的，我想设置不同的高度。

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

例如，如果“左”网格的高度为400px而“右”网格的高度为300px，我想将网格400px设置为水平。但在智能手机这样的小型显示器中，它们是垂直排列的在这种情况下，我想设置“右”网格原始高度（300px）。

我该怎么做？

Answer 1

执行此操作的最佳方法是使用简单的JS补救措施。我多年来一直在使用Foundation，这是我的自动防故障代码。

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

这将为“小项目”的所有div类提供相等高度的列。基于最高的柱子高度：

Answer 2

媒体查询将用于决定断点768px之间要采取的操作。如果你希望两个水平div保持相同的高度，无论两者的内容是什么，甚至当你调整窗口大小时 - 你可能会导致两边的内容不均衡地增长 - 你可能需要使用javascript

我在我的网站上使用了一个，它非常简单，可能并不完全安全，但这是我的解决方案：

$(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);
  }
});

每当窗口调整大小或加载时，它会将高度重置为自动，如果窗口宽度超出768断点，则会将两个高度设置为两者中的较大者

用zurb-foundation网格设置高度

2 个答案: