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

Question

I have a parent div with id contentPlaceHolder. It has a width of 640px. I then have content loading into this div with ajax as follows:

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>

problem is, my parent div contentPlaceHolder does not automatically grow with the ajax content. I tried make the div height:auto and that did not help. Only way it seems to work is if I fix a height but problem with that is I cannot fix a height as the content length varies.

Any advice as to how I can achieve this?

Thanks

Answer 1

Content loaded with .load() should automatically adjust the height of the container unless the height is specifically set on the content that was loaded, the container, or one of its parent elements.

Use your browser's built in developer tools ( chrome , firefox ) to inspect the container element, its contents after the ajax load, and it's parent elements. I would bet that somewhere you will find a height property set to a specific value and possibly even an overflow property set to hidden .

Here is a fiddle that demonstrates the height auto adjusting even with a min-height and overflow:hidden set (tested in chrome and firefox).