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（）for $（window）.load（function（）{，但现在我可以看到 DivLeft跳跃的高度（起初是它的原始设置高度，加载图像后，它会延伸）。看起来很糟糕。有没有提示如何改进它？

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());
    });
 }

没有跳跃可以看到，效果很好！

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

2 个答案: