根據內容大小動態調整div動態高度並調整其大小

Question

有誰知道是否可以對div的大小進行動畫處理，以便它的內容大小恰到好處？高度必須是動態的，這意味着如果我調整瀏覽器窗口的大小，那麼div會增加/減少高度。我已經有了視口80％的動態寬度。

這是我用來爲當前的容器調整大小的動畫，並且調整大小的部分起作用，但動畫不能用於調整大小。當我將高度設置爲固定高度時，請說：

$(".pagecontainer").animate({ 
    height: '700px' 
}, 500); 

它動畫。但是，如果我有身高：'自動'，那麼它不會動畫，只是簡單地捕捉到新的尺寸。

JS：

<script> 

    function setContainerHeight() { 
     $(".pagecontainer").animate({ 
      height: 'auto' 
     }, 500); 
    } 

    $('.link').on('click', function(e){ 
     $('.pagecontainer>div').fadeOut(0); 
     setContainerHeight(); 
     $(this.getAttribute("href")).fadeIn(); 
    }); 

</script> 

CSS：

.pagecontainer { 
min-height:450px; 
width:80%; 
min-width:800px; 
padding:50px 0; 
margin: 0 auto; 
} 
.pagecontainer>div{ 
display: none; /*wait until page needs to be faded in*/ 
padding-left:50px; 
padding-right:50px; 
position:relative; 
} 

HTML：

<div class="pagecontainer"> 

    <a href="#page1" class="link">page 1</a> 
    <a href="#page2" class="link">page 2</a> 
    <a href="#page3" class="link">page 3</a> 

    <div id="page1">TONS OF TEXT HERE</div> 

    <div id="page2">A BIT OF TEXT HERE</div> 

    <div id="page3">BUNCH OF IMAGES</div> 

</div> 

說，例如，第1頁擁有噸的文字，我不知道什麼高度它會因爲高度本身是動態的，如果我擴大瀏覽器窗口，那麼明顯需要的高度會縮小。第2頁可能只有一點文字，所以需要的高度會小得多。第3頁有一堆圖像，但我不知道所需的高度（這是我的問題的重點，讓腳本計算需要多少高度）。

如何調整「.pagecontainer」的大小以使其高度爲完全適合每個頁面上的內容，即使當我調整瀏覽器窗口的大小時？例如，如果我點擊page1，那麼容器會放大（用jQuery的.animate（）動畫），然後如果我點擊page2，那麼容器會縮小。

這裏是一個圖像描述：http://i.imgur.com/leOeJG0.png

感謝。

Answer 1

正如我所看到的，不需要函數expandPageContainer() - 當沒有容器可見並且您不需要計算高度的任何絕對值時，就會發生動畫。

只需刪除expandPageContainer()的函數和函數調用，並將您的容器CSS設置爲height: auto並且您期望的行爲將發生。根據高度調整容器的大小以適應其內容是一種默認行爲。 （您可能想要刪除margin-bottom規則）

還要求fadeOut(0)與hide()相同。後者更有效一些。

Answer 2

我沒有理由計算出身高 - 身高會自動改變。

jQuery的

$('.pagecontainer>div').fadeOut(0); 

$('.link').on('click', function(e){ 
    $('.pagecontainer>div').fadeOut(0); 
    $(this.getAttribute("href")).fadeIn(); 
}); 

HTML結構

<a href="#page1" class="link">page 1</a> 
<a href="#page2" class="link">page 2</a> 
<a href="#page3" class="link">page 3</a> 

<div class="pagecontainer"> 

    <div id="page1">Block One</div> 
    <div id="page2"><img src="http://placehold.it/200x200" /></div> 
    <div id="page3"><img src="http://placehold.it/300x400" /></div> 

</div> 

http://jsfiddle.net/daCrosby/tmuC2/

編輯

根據你的意見，你需要它來上下動畫，而不是淡入淡出。要做到這一點，使用animate([height:"show",speed)和animate([height:"hide",speed)如下所示：

$('.pagecontainer>div').animate({height:"hide"},500); 
    $(this.getAttribute("href")).animate({height:"show"},500); 

http://jsfiddle.net/daCrosby/tmuC2/1/