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

最后发布: 2014-07-26 20:54:27


问题

我写了一些jQuery,以使同一页面上的多个元素的高度相等。 盒子里的内容看起来不错。 它适用于页面加载,但是问题是调整窗口大小时,框内的文本开始溢出框外,而不是框重新计算其必要高度。

这是一个示例: http : //jsfiddle.net/hV5A​​G/

使用您的浏览器并将其水平调整为较小尺寸,以查看我在说什么。

我尝试添加:

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

但这没有用。

jquery
回答

一次手动设置高度后, <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/


回答

您可以使用此:

p {font-size: 2vw;}

小提琴

视口百分比长度相对于初始包含块的大小。 更改初始包含块的高度或宽度时,将对其进行相应缩放。 但是,当根元素上的溢出值为auto时,则假定不存在任何滚动条。 请注意,初始包含块的大小受视口上滚动条的影响。

视口百分比长度


回答

您可以在重新检查之前将其重置为自动

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

});

小提琴

缩小一点,看起来像这样

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

小提琴