-1

我有两个相邻的 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的高度跳跃（起初它的原始高度已设置，并且在加载图像后，它扩展了）。看起来很糟糕。任何提示如何改进它？

4

2 回答 2

2

在你的情况...

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

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

或类似的东西..（等高）

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

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

于 2013-11-13T11:50:35.050 回答
0

我解决了这个问题：

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

看不到跳跃，效果很好！

于 2013-11-13T12:46:48.003 回答