javascript - 使用ajax加载内容的div的自动高度

Question

我有一个 ID 为 contentPlaceHolder 的父 div。它的宽度为 640px。然后，我使用 ajax 将内容加载到该 div 中，如下所示:

function loadContent(page){
    $("#contentPlaceHolder").html('<br><br><div style="width:664px; text-align:center; font-size:12px; color:#666;"><img src="/images/loader.gif" border="0"><br>loading</div>');
    $("#contentPlaceHolder").load("/ajax/content?page=" + page);
}

<div onclick="loadContent('profile')">Profile</div>

<div id="contentPlaceHolder" style="width:640px; height:auto; text-align:left;"></div>

问题是，我的父 div contentPlaceHolder 不会随着 ajax 内容自动增长。我尝试设置 div height:auto 但这没有帮助。它似乎唯一有效的方法是如果我修复高度，但问题是我无法修复高度，因为内容长度变化。

关于如何实现这一目标有什么建议吗？

谢谢

Answer 1

使用 .load() 加载的内容应自动调整容器的高度，除非在加载的内容、容器或其父元素之一上专门设置了高度。

使用浏览器内置的开发人员工具( chrome 、 firefox )检查容器元素、ajax 加载后的内容及其父元素。我敢打赌，您会在某个地方找到设置为特定值的 height 属性，甚至可能发现设置为 hidden 的 overflow 属性。

这是一个fiddle演示了即使设置了 min-height 和 overflow:hidden 也能自动调整高度(在 Chrome 和 Firefox 中测试)。