javascript更改内部html后自动调整div高度

以下是网站的位置： javascript位于此处：{site}/scripts/main.js

我使用jQuery将内容动态加载到主页上的container div中。当你点击主页上的一个链接，例如TestProject1，它会从ajax.php加载内容，并将新的html粘贴到container div中。我尝试了很多不同的解决方案，但我无法获得适合新内容的高度。它只会延伸到div的末尾。但是，如果转到，它会按预期工作。我尝试了与页面加载相同的方法，但不起作用：

$('#container').html(d);
var h = $('#container').height();
$('#container').html(load_html); // load_html is a predefined var that holds html of a loading image
$('#container').animate({ height: h, opacity: 0 }, 300); // open to new height and fade out loading image
setTimeout("$('#container').html(d);", 300); //  d is saved in a global var so this works
setTimeout("$('#container').animate({ opacity: 1 }, 300);", 300);

因此，它应该：

获得新高度 加载加载图像html 将高度滑出到新值并淡出 加载新的html 淡入

---

它正常工作，只是当它第一次加载新html时，div从未扩展高度以适应新内容，因此它会获得旧的高度值。

您尝试过$.slideDown吗

var html = $(d);
d.wrap('<div />')
    .hide()
    .appendTo($('#container'))
    .slideDown();

---

容器未正确调整大小的原因是内容上设置的静态高度太小。

问题似乎是您已将容器高度固定为67px。

---

与加载html之前没有固定容器高度的示例相比。

您可以尝试在动画中执行此操作，而不是尝试指定确切的高度。此外，将加载微调器放在与内容区域分开的div中：

$('#container').animate({ height: 'hide', opacity: 0 }, 300, function() {
    $('#container').empty();
    $('#loading').fadeIn();
});

然后，当您有新内容时，即在AJAX请求结束时执行此操作：

$('#loading').hide();
$('#container').html(d).animate({ height: 'show', opacity: 1 }, 300);

---

我希望这将帮助您走上正轨。

除了静态高度是由jQuery在某处设置的。我尝试了滑动下降功能，但没有成功。是的，我意识到我做错了什么。在页面加载时，它设置了固定高度。谢谢