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

Question

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

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

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

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

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

我知道还有其他方法可以做到这一点，比如显示：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);

Answer 1

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

Answer 2

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

您可以通过将样式设置为空字符串来清除样式。例如$(".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);。

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

Jquery make element as taller as tallest element on resize

jquery

height

resize