Question

我写了一些jquery来给同一页面上的多个元素赋予相同的高度。盒子内的内容看起来不错。它适用于页面加载，但问题是当窗口调整大小时，框内的文本开始溢出开箱即用，而不是重新计算其必要高度的框。

使用您的浏览器并将其水平调整为较小，以查看我正在谈论的内容。

我尝试添加：

    $( window ).resize(function() {
    equalHeight($(".equalheight"));
    });

但那没用。

Answer 1

手动设置一次高度后，<div>不再自动调整大小。在equalHeight函数中，在计算最大高度之前将行为重置为'auto'：

group.css('height','auto'); 
var tallest = 0;
group.each(function() {
   var thisHeight = $(this).height();
   if(thisHeight > tallest) {
      tallest = thisHeight;
   }
});
group.height(tallest);

当然，您需要记住在调整窗口大小时调用您的函数。这是一个工作小提琴：http://jsfiddle.net/MGfMh/

Answer 2

您可以使用：

p {font-size: 2vw;}

fiddle

视口百分比长度是相对于的大小初始包含块。当初始的高度或宽度包含块被更改，它们会相应缩放。然而，当根元素上的溢出值为auto时，任何滚动假设条不存在。注意初始包含块的大小受到滚动条的存在的影响视口。

Viewport-percentage lengths

Answer 3

您可以在重新检查之前将这些框重置为自动

jQuery(function($) { 

    function equalHeight(group) {
        var tallest = 0;
        group.css('height','auto').each(function() {
            var thisHeight = parseInt($(this).css('height'), 10);
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        group.height(tallest);
    }
    equalHeight($(".equalheight"));

    $( window ).resize(function() {
        equalHeight($(".equalheight"));
    });

});

FIDDLE

稍微缩小一点，看起来像这样

function equalHeight(group) {
    group.css('height','auto').height(Math.max.apply(null, group.map(function(_,el) {
        return $(el).height();
    })));
}

FIDDLE

动态更改高度jsFiddle时的jQuery问题

3 个答案: