title: Animate and resize div dynamic height according to content size
body: <p>Does anyone know if it's possible to animate the resize of a div so that it's exactly the right size for the content? The height has to be dynamic, meaning if I resize the browser window then the div will increase/decrease in height. I already have a dynamic width of 80% of viewport.</p>
  
  <p>This is what I use to animate the resize of a container currently, and the resizing part works, but the animation does not play for the resizing. When I had the height set to a fixed height, say:</p>
  
  <pre><code>$(".pagecontainer").animate({
      height: '700px'
  }, 500);
  </code></pre>
  
  <p>It animated. But if I have height: 'auto', then it won't animate, simply just snaps to the new size.</p>
  
  <p>JS:</p>
  
  <pre><code>&lt;script&gt;
  
      function setContainerHeight() {
          $(".pagecontainer").animate({
              height: 'auto'
          }, 500);
      }
  
      $('.link').on('click', function(e){
          $('.pagecontainer&gt;div').fadeOut(0);
          setContainerHeight();
          $(this.getAttribute("href")).fadeIn();
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.pagecontainer {
  min-height:450px;
  width:80%;
  min-width:800px;
  padding:50px 0;
  margin: 0 auto;
  }
  .pagecontainer&gt;div{
  display: none; /*wait until page needs to be faded in*/
  padding-left:50px;
  padding-right:50px;
  position:relative;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="pagecontainer"&gt;
  
      &lt;a href="#page1" class="link"&gt;page 1&lt;/a&gt;
      &lt;a href="#page2" class="link"&gt;page 2&lt;/a&gt;
      &lt;a href="#page3" class="link"&gt;page 3&lt;/a&gt;
  
      &lt;div id="page1"&gt;TONS OF TEXT HERE&lt;/div&gt;
  
      &lt;div id="page2"&gt;A BIT OF TEXT HERE&lt;/div&gt;
  
      &lt;div id="page3"&gt;BUNCH OF IMAGES&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Say for example page 1 has tons of text, I don't know what height it will take up as the height itself is dynamic, if I widen the browser window then obviously height needed will shrink. Page 2 might only have a bit of text, so the height needed will be much smaller. Page 3 has a bunch of images but I don't know the height required to fit them all (which is the point of my question, letting the script calculate how much height is needed).</p>
  
  <p>How do I resize ".pagecontainer" so that its height <strong>perfectly fits the content on each page even when I resize browser window</strong>? For example if I click page1, then the container will enlarge (animated with jQuery's .animate() ), then if I click page2, then container will shrink.</p>
  
  <p>Here is an image description: <a href="http://i.imgur.com/leOeJG0.png" rel="nofollow">http://i.imgur.com/leOeJG0.png</a></p>
  
  <p>Thanks.</p>