0

所以这个函数的 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>
4

3 回答 3

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，我猜。

示例FIDDLE：http: //jsfiddle.net/sabithpocker/xgYBZ/

于 2012-06-17T05:39:23.283 回答
0

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

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

编辑：试试这个包裹内裤并使用内裤来测试高度的版本

//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，以便填充在内部而不是外部，要么需要在函数中添加额外的数学。

于 2012-06-17T04:54:18.980 回答
-1

将上面所有的 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>

这行得通吗？

于 2012-06-17T04:47:26.877 回答