带有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高度：auto并没有帮助。它似乎工作的唯一方法是，如果我修复一个高度，但问题是因为内容长度不同，我无法修复高度。

关于如何实现这一目标的任何建议？

由于

Answer 1

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

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

这是一个fiddle，即使使用min-height和overflow:hidden设置（在chrome和firefox中测试），它也可以自动调整高度。