1

文档准备好后，我正在内容 div 中加载页面。但是，我也有一些链接，当用户点击它们时，它们会将不同的页面加载到相同的内容 div 中。我正在尝试建立内容 div 的高度来控制其他内容，但是一旦在页面加载时设置了 div 的高度，我似乎无法获得包含新页面的内容 div 的新大小......</ p>

例如，加载的页面为 6000px，页面 1 的高度为 500px，页面 2 的高度为 300px。页面加载时，内容 div 设置为 6000px。然而，当我单击第 1 页将其加载到内容 div 中时，内容 div 仍然设置为 6000px，即使内容本身的高度只有 500px，对于第 2 页也是如此……</p>

这是html：

<div id="select">
    <div id="menu">
        <ul>
        <li><a class="load" href="javascript:void(0)" id="page1">page1</a></li>
        <li><a class="load" href="javascript:void(0)" id="page2">page2</a></li>
        </ul>
    </div>
</div>
<div id="spacer"></div>
<div id="content"></div>

这是CSS：

#select { 
    width: 215px;
    top: 20px;
    left: 10px;
    position: absolute;
    }

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

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

这是我的jQuery：

$(document).ready(function() {
    //Load content on page load
    $("#content").html('<ul><li>Loading Content...</li></ul>')
                 .load("/content/" + "projects.php", null, function() {
                            contentHeight = $("#content").height();
                            selectHeight = $("#select").height();
                            $("#spacer").height(contentHeight + "px")
                                        .css({"top": selectHeight + 40 + "px" });
                 });
    //Load content on click
    $(".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();

                                    if(selectHeight < contentHeight) {
                                    $("#spacer").css({"top": selectHeight + 40 + "px", "display": "block" })
                                                .height(contentHeight + "px");
                                    }else{        
                                    $("#spacer").css({"display": "none"}); 
                                    return;
                                    }
                    });
    });
});
4

3 回答 3

0

有两种选择

1.)您可以使要在内容 div 内加载的所有页面高度与内容 div 的大小相同

2.)其他由 Jquery

先清除右侧内容div $('#content').remove();

第二次加载您的内容并在 $('#content').height(...) 的帮助下设置加载文档的高度

参考： http ://api.jquery.com/height/

于 2012-05-31T09:35:15.320 回答
0

尝试将事件更改为单击，而不是“加载”

于 2009-09-23T10:37:28.400 回答
0

您是否尝试将高度设置为“自动”？

编辑：我看了你在做什么，一开始有点混乱（一点 CSS 会有很大帮助）。我想知道是否可能不使用“var”分配变量会导致问题，但由于某种原因，这个脚本总是对我有用。

所以，我稍微清理了代码——我不确定为什么每次都添加 selectHeight，因为该值不应该改变——你可以在 CSS 中处理它，因为不需要绝对定位。

所以，试试这个（没有更改 HTML，所以我没有添加它）：

CSS

#spacer {
 background: #555;
 float: left;
 width: 200px;
 margin-right: 20px;
 padding: 20px;
}
#content {
 background: #444;
 float: left;
 width: 1000px;
 padding: 20px;
}

脚本

$(document).ready(function(){
 //Load content on page load
 $("#content").html('<ul><li>Loading Content...</li></ul>')
  .load("/content/" + "projects.php", null, function() {
   $("#spacer").height( $("#content").height() + "px");
  });

 //Load content on click
 $(".load").click(function(){
  var loadName = $(this).attr("id");
  $("#content")
   .html('<ul><li>Loading Content...</li></ul>')
   .load("/content/" + loadName + ".php", null, function(){
    $("#spacer").height( $("#content").height() + "px");   
  });
 });
});
于 2009-09-23T22:23:10.857 回答