jQuery 中 resize() 的高度不会改变答案

【问题标题】：Height does not change on resize() in jQueryjQuery 中 resize() 的高度不会改变
【发布时间】：2016-02-16 17:46:41
【问题描述】：

我有 4 个不同高度的 div 容器。我希望每当我加载页面或调整窗口大小时它们都具有相同的高度。我给每个 div 类 requirement 并尝试了以下 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。

【问题讨论】：

我试过你的代码，它工作正常
@IsraGab 在哪里？小提琴显示了 Chrome 中描述的问题。
@israGab 我使用的是 firefox 43.0.3 您使用的是哪个浏览器？小提琴有用吗？

标签： javascript jquery html css

【解决方案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);
      });
  }

【讨论】：

好收获。调试显示该函数在调整大小时运行。 jsfiddle.net/isherwood/jnf0ke98/8
@isherwood 谢谢。前段时间我也遇到过同样的问题，我盯着我的代码看了很长时间才意识到发生了什么
@Adam 欢迎您。请记住，具有“高度：自动”的 div 可能并不总是理想的行为，因此您必须相应地进行更改

【解决方案2】：

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

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

它非常易于使用，也适用于 rezise。

【讨论】：

YAP（又一个插件）。可能是一个很好的资源，但在这里可能有点矫枉过正。