title: How can I set a div's height matching to responsive content?
body: <p><br>
  i try to do following:<br>
  on click re-sizing a divs height matching to the divs content height ( the content is through "overflow:hidden" hidden )<br>
  the content of the div is responsive ( means if the window width changes the divs content height changes, too.</p>
  
  <p>on click changing the divs (.video) height to match the divs content (.video-container) height:</p>
  
  <pre><code>$('.video').click(function()
  {
      $(this).animate(
      {
          height:$('.video .video-container').height()
      });
  });
  </code></pre>
  
  <p>this works pretty well, but if I resize the window the height of .video-container changes, and I need to resize .video onesmore.</p>
  
  <p>this is everything I already got:</p>
  
  <p>video:</p>
  
  <pre><code>&lt;div class="video"&gt;
      &lt;div class="video-container"&gt;
          &lt;div class="flowplayer"&gt;
              &lt;video preload='none'&gt;
                  &lt;source type="video/mp4" src="video.mp4"/&gt;
              &lt;/video&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>$(document).ready(function()
  {
      $('.video').click(function()
      { 
          $(this).animate(
          {
              height:$('.video .video-container').height()
          }); 
      });
  </code></pre>
  
  <p>Link removed - ( found solution and everything works now )</p>
  
  <p>If you click on the first black container it extends, after that you'll note if you re-size the browser the video gets smaller, but the container stays big. i hope this clarifies the problem.</p>