加載了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中測試）。