JQuery，由于图像内容而错误识别的div高度

Question

我有两个相邻的 div（DivLeft、DivRight），它们被包裹在 DivHolder 中。 DivRight 包含另一个 div，因此在高度上扩展。我希望 DivLeft 的最小高度与 DivRight 相同。

HTML 看起来或多或少是这样的：

<div class="DivHolder">
   <div class="DivLeft"></div>
   <div class="DivRight">
      <div class="add1"></div>
      <div class="add2"><img ...></div>
      <div class="add3"><img ...></div>
      ....
   </div>
</div>

试过这个脚本

$(document).ready(function () {
if ($(".DivHolder").length > 0) {

         $(".DivLeft").css("minHeight", $(".DivRight").height());
    }
}

它在 DivLeft 上附加了一些高度，但是一个错误的高度。我检查了 DivRight 的高度，它是 720px，但最小高度 DivLeft 增益是 241px。 DivRight 中包含的所有 div 都没有这个高度。这似乎是一个“随机”值。有人看到问题了吗？

谢谢！

编辑： 我发现问题的根源是 DivRight 中包含的一些 div 包含图像。当我调用我的函数时这些图像没有加载，因此 DivRight 似乎更短。

我将 $(document).ready(function () 更改为 $(window).load(function() {，但现在我可以看到 DivLeft jumps 的高度（最初是它的原始高度已设置，加载图像后，它会扩展）。这看起来很糟糕。有什么建议可以改进它吗？

Answer 1

你的情况……

$('.DivLeft').css('min-height', $('.DivRight').height());

演示： http://jsfiddle.net/tE6ER/

---

或类似..（等高）

$('.DivLeft, .DivRight').height(
        Math.max(
            $('.DivLeft').height(),
            $('.DivRight').height()
        )
);

演示： http://jsfiddle.net/2WPwu/

Answer 2

我用这个解决了这个问题：

 if ($(".DivHolder").length > 0) {
    $(".DivRight").find("img").load(function (){
       $(".DivLeft").css("minHeight", $(".DivRight").height());
    });
 }

看不到跳跃，效果很好！