在调整大小时检测 div 高度

Question

我正在尝试检测我正在加载内容的 div 的高度。这个 div 没有指定的高度，因为我正在将页面加载到其中，并且它们本身会以不同的数量填充 div。我认为我使用的代码不起作用。

#content div 在document load 上获得正确的高度，但是当点击load 事件时我无法获得高度。

html:

<div id="select">
<div id="menu">
    <ul>
    <li><a class="load" href="javascript:void(0)" id="p1">P1</a></li>
    <li><a class="load" href="javascript:void(0)" id="p2">P2</a></li>
    </ul>
</div>
<div id="spacer"></div>
<div id="content"></div>

css:

#content {
    left: 227px;
    top: 20px;
    width: 703px;
    padding: 0 0 100px 0;
    position: absolute;
}

#spacer {
    border-right: 2px solid #000000;
    left: 10px;
    position: absolute;
    top: 710px;
    width: 215px;
}

我的 jquery：

$(document).ready(function() {
    //Load Initial Content
    $("#content").html('<ul><li>Loading Content...</li></ul>')
        .load("/content/" + "projects.php", null, function() {
            contentHeight = $("#content").height();
            selectHeight = $("#select").height();

            $("#content").height(contentHeight);
            $("#select").height(selectHeight);
            $("#spacer").height((contentHeight - selectHeight - 40) + "px")
                        .css({"top": selectHeight + 40 + "px" });
            });

    //Load content on click function
    $(".load").click(function(){
        loadName = $(this).attr("id");
        $("#content").html('<ul><li>Loading Content...</li></ul>')
                     .load("/content/" + loadName + ".php", null, function(){
                         contentHeight = $("#content").height();
                         selectHeight = $("#select").height();

                         $("#spacer").height(0);

                         if(selectHeight > contentHeight) {
                         $("#spacer").css({"display": "none"}); 
                         }else{

                         $("#spacer").css({"top": selectHeight + 40 + "px", "display": "block" })
                                     .height((contentHeight - selectHeight - 40) + "px");
                         return false;
                         }
                         });
    });
});

我在加载时在萤火虫中得到这个：

<div id="select" style="height: 689px;"/>
<div id="spacer" style="height: 5461px; top: 729px;"/>
<div id="content" style="height: 6190px;"/>

现在，如果我点击 P2，则具有内容高度的 div 保持不变，即使 div 内的实际内容只有 625px 高；所以它不会被切换。

Answer 1

除非 JQuery 超级聪明（它很聪明，但我不认为它这么聪明），否则您不会收到调整大小事件，因为 firefox（可能还有 Safari）仅支持窗口对象上的调整大小事件。 IE 确实支持 DIV 等元素的调整大小事件。

因此您需要一种不同的方法：-

$(document).ready(function()
{
  $("#content").html('<ul><li>Loading Content...</li></ul>')
              .load("/content/" + "projects.php", null, function()
              {
                window.setTimeout(content_loaded, 0);
              });

  function content_loaded()
  { 
    $("#content").css({"height": $("#content").height() + "px"}); 
  }

  $("#spacer").css({"height": $("#content").height() + "px"});

  $(".load").click(function()
  {
    loadName = $(this).attr("id");

    $("#content").html('<ul><li>Loading Content...</li></ul>')
                 .load("/content/" + loadName + ".php", null, function()
                 {
                   window.setTimeout(content_loaded, 0); });
                 });

    $("#spacer").css({"height": $("#content").height + "px"});
  });
});

注意我这里使用了setTimeout方法，因为IE在内容发生变化时，在整理宽度和高度参数时经常会滞后。通过使用 setTimeout，它可以让 IE 在访问 height 和 width 属性之前进行排序。你可以选择去掉它，直接将content_loaded作为回调参数传递给load方法。

Answer 2

//Get Content size after load
$("#content").bind("resize", function(){ 
                    $("#content").css({"height": $("#content").height()}); 
                    });

您没有将“px”添加到高度值的末尾

//Get Content size after load
$("#content").bind("resize", function(){ 
                    $("#content").css({"height": $("#content").height() + "px"}); 
                    });

编辑跟随

让它在本地工作，您在点击事件中的高度函数末尾缺少括号：

$("#spacer").css({"height": $("#content").height() + "px"}); //added parenthesis enables the #spacer div to change height accordingly

希望对你有帮助

Answer 3

我喜欢在未设置时使用 offsetheight 来检测高度。