加载了ajax内容的div的自动高度

Question

我有一个ID为contentPlaceHolder的父div。 宽度为640像素。 然后，我使用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属性设置为特定值，甚至可能将overflow属性设置为hidden 。

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