Question

所以这个函数的onLoad部分效果很好，但是当我调整窗口大小时，它不会调整高度。只有onLoad，它要求我每次调整窗口大小时刷新页面以使div高度均衡，不确定为什么.resize不起作用。

我犯了错误吗？

//equalize funciton
function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

<script type="text/javascript"> 
$(window).load(function() { 
    equalHeight($("#div_right, #div_left, #div_bottom, .border")); 
}); 
</script>
<script type="text/javascript"> 
$(window).resize(function() { 
    equalHeight($("#div_right, #div_left, #div_bottom, .border")); 
});

$(document).ready(function() { 
    equalHeight($("#div_right, #div_left, #div_bottom, .border")); 
}); 
</script>

Answer 1

//equalize funciton
function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).css({'height':'auto'}).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

$(window).on('load resize',function() { 
    equalHeight($("#div_right, #div_left, #div_bottom, .border")); 
});

//'on'函数需要jQuery 1.7，我想。

exampleFIDDLE：http://jsfiddle.net/sabithpocker/xgYBZ/

Answer 2

一旦你通过脚本使用内联css设置高度，它们在调整大小之前，期间和之后都将是相同的固定高度...在页面加载时设置的相同值。那个高度仍然是内联的！

如果不存在其他内联css，则需要使用removeAttr('style')或将其中的内容包装在另一个元素中，并检查内部包装的高度并使用该值设置主要元素。 / p>

编辑：尝试这个包装内部并使用它们来测试高度的版本

//equalize funciton
function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).find('.inner_wrap').height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
$(document).ready(function() { 
    var $group=$("#div_right, #div_left, #div_bottom, .border")
    $group.wrapInner('<div class="inner_wrap">');   
    equalHeight($group); 
});

编辑：如果组中的各个类的填充不同，则会出现陷阱。如果是这种情况，则需要更改css，因此padding在内部而不是外部，或者需要在函数中添加额外的数学。

Answer 3

使用以下内容替换上面的所有JavaScript：

<!-- Include jQuery somewhere up here -->
<script type="text/javascript">
  // Equalize function
  function equalHeight(group) {
    tallest = 0;
    group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) { tallest = thisHeight; }
    });
    group.height(tallest);
  }

  (function($){

    $(window).resize(function() { 
      equalHeight($("#div_right, #div_left, #div_bottom, .border")); 
    }).resize();

  })(jQuery);
</script>

这样做可以吗？

JQuery .load工作但不是.resize

3 个答案: