Jquery在调整大小时使元素与最高元素一样高

Posted 2023-03-06

【中文标题】Jquery在调整大小时使元素与最高元素一样高

【英文标题】：Jquery make element as taller as tallest element on resize

【发布时间】：2015-09-25 05:03:42

【问题描述】：

我在这里有一个 jsfiddle - https://jsfiddle.net/mx3sqksn/1/

我有两个元素（这里是 p 标签）

他们有不同的高度，但我不知道高度会是多少。

我需要两个元素都和两者中最高的一样高。

我还需要它具有响应性，因此当窗口较小且元素较高时，两者都保持相同的高度。

我知道还有其他方法可以做到这一点，例如 display: table;但我不能在实际代码中这样做。

        var fluid_box = function() 
          var highest = 0;
          var hi = 0;
          $(".text").each(function()
            var h = $(this).height();
            if(h > hi)
               hi = h;
               highest = $(this).height(); 
            

            $(".text").css('height', highest);

          );

        

         // Fire on DOM ready
        fluid_box();

        // Fire upon resize
        $atj(window).resize(fluid_box);

【参考方案1】：

由于您希望它在调整大小时起作用，您需要清除添加的内联高度样式，然后检查最高的。

您可以通过将样式设置为空字符串来清除样式。例如$(".text").css('height', '') 将完全删除内联 height=""。然后高度将是内容的高度，直到您再次将其设置为内联。

JSFiddle：https://jsfiddle.net/mx3sqksn/6/

var fluid_box = function () 
    var highest = 0;
    var hi = 0;
    $(".text").css('height', '').each(function () 
        var h = $(this).height();
        if (h > hi) 
            hi = h;
            highest = $(this).height();
        

    );
    $('#output').html(highest);
    $(".text").css('height', highest);


// Fire on DOM ready
fluid_box();

// Fire upon resize
$(window).resize(fluid_box);

注意：您的 JSFiddle 没有触发调整大小事件，因此将其更改为 $(window).resize(fluid_box);。

【参考方案2】：

$(".text").css('height', highest); 在循环外调用它，两个 div 的高度将相等。

【讨论】：

这使它们的高度相等，但在调整窗口大小时高度没有响应。 jsfiddle.net/mx3sqksn/5