javascript - 按类划分的元素的最大高度不会在屏幕调整大小时更新

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