在屏幕大小调整时，不按类更新元素的最大高度

Question

我使用此脚本获取目标元素的最大高度（类“col4home2”的元素中的“p”元素）：

var maxHeight=0;
$('.col4home2 p').each(function(){
    maxHeight=Math.max(maxHeight, $(this).height());
}).height(maxHeight);

适用于页面加载。但是，在调整窗口大小时，我再次调用此脚本。当发生这种情况时，我得到最大高度的相同值，即使调整大小导致文本重排，并且“p”元素的高度明显更大。

这是浏览器问题吗？或者我的代码中的某些内容没有刷新maxHeight的值？

谢谢！

Answer 1

您的jQuery代码在页面加载的所有段落上设置显式像素高度。当您调整页面大小时，段落保持指定的高度（当然，它们的内容可能会溢出）。

解决方案：在页面调整大小时，您必须先撤消显式高度，以便段落大小与其内容相匹配：

$('.col4home2 p').height('auto');

然后重新计算高度：

var maxHeight = 0;
$('.col4home2 p').height('auto').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
}).height(maxHeight);