CSS維持div的高度變化的內容時動態

我試圖迫使一個div有根據他的內容有一定的高度，改變它，只有當新的內容被加載。CSS維持div的高度變化的內容時動態

比方說我：

<div id="wrapper" style="width: 90%; margin: 0 auto;"> 
<div id="collapse_saving_div" style="min-height: 100%;"> 
    <div id="my_content" style="width: 100%;"> 
    Content 
    Content 
    Content 
    </div> 
</div> 
    <div id="my_bottom_content" style="clear: both;"> 
    </div> 
</div>

我要去內容動態地加載到#my_content與腳本：

隱藏#my_content

顯示loader.gif

內容獲取

隱藏GIF

淡入#my_content

的事情是，每當明顯得到#my_content隱藏#my_content_bottom過來，然後立即下降了新的內容被褪，沒有任何形式的動畫和所有的後這種「分區跳躍」很糟糕。

這將大致解決這個問題，如果我可以使包裝DIV不會崩潰。

爲了做到這一點，我試着製作#collapse_saving_div並給它一個100％的最小高度，我想這樣做會在＃my_content的位置修正他的高度，直到更大或更小的東西被加載。但它不起作用。

有什麼建議嗎？由於

編輯：使用

var content_height = $('#main_content').height(); 
     $('#main_content').hide(); 
     $('.loader').height(content_height); 
     $('.loader').show();

來源

2012-04-05 g0dl3ss

去除div的內容與之前的js解決了這個問題，補充一點：（原JS，因爲我不這樣做的jQuery）

elem.style.height = elem.offsetHeight+"px";

然後，內容加載後，當您要新的高度生效時：

elem.style.height = "auto";

來源

2012-04-05 20:58:26

謝謝！我想我的解決方案是一樣的你。將接受答案，後來嘗試，如果它的工作原理。 – g0dl3ss 2012-04-05 21:09:52

CSS維持div的高度變化的內容時動態

回答

相關問題