Question

我有4个不同高度的div容器。我希望每当我加载页面或调整窗口大小时，它们都具有相同的高度。我为每个div提供了要求类，并尝试了以下jQuery代码：

<script type="text/javascript">

        $(document).ready(adjustRequirement);
        $(window).resize(adjustRequirement);

        function adjustRequirement(){
            var maxHeight = -1;

            $('.requirement').each(function() {
                maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
            });

            $('.requirement').each(function() {
                $(this).height(maxHeight);
            });
        }
</script>

现在每当我加载页面（或使用F5刷新）时这都有效，但是当我调整窗口大小时它不起作用。我究竟做错了什么？这是fiddle。

Answer 1

发生这种情况是因为你在第一次运行函数时设置了一个固定的高度，这样每个div的高度总是相同的。由于div默认为overflow: visible，因此即使文本超出div，也会显示该文本。

试试这个，我添加了一行重置div的高度，以便调整以适应内容$(this).css('height', 'auto');：

  $(document).ready(adjustRequirment);
  $(window).resize(adjustRequirment);

  function adjustRequirment(){
      var maxHeight = -1;

      $('.requirement').each(function() {
          $(this).css('height', 'auto');
          maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
      });

      $('.requirement').each(function() {
          $(this).height(maxHeight);
      });
  }

Answer 2

您也可以使用jquery-match-height。只需下载并实施jquery.matchHeight.js

即可

$(document).ready(function() {
  $(function() {
    $('.requirement').matchHeight();
  }
});

它非常容易使用，它也适用于重新使用。

jQuery

2 个答案: