title: Automatically adjust div height to window size, but no smaller than children
body: <p>I could use a little help with the following issue. What I've got is a fairly basic one-page website. Stripped down, it's structure looks pretty much like this:</p>
  
  <pre><code>&lt;div class="full_height" id="home"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="span8"&gt;
          CONTENT GOES HERE
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This div structure repeats 5 times, with consecutive id's [home, second, third, fourth, fifth]. The problem I'm having is that I'd like the .full_height containers to be the same size as the window upon loading the site and resize along with the window size upon resizing. In addition, the div's size should never become any smaller than it's children.</p>
  
  <p>My current attempt looks like this:</p>
  
  <pre><code>$(window).on("resize load", resizeWindow);function resizeWindow( e ) {
    var newWindowHeight = $(window).height()-160;
  
    var idSelector = ["home","second","third","fourth","fifth"];
  
    for (var i = 0; i &lt; idSelector.length; i++) {
      var element = document.getElementById(idSelector[i])
  
      if( element.offsetHeight &lt; element.scrollHeight){
        $("#"+idSelector[i]).css("height", "auto" );
      }
      else{
        $("#"+idSelector[i]).css("height", newWindowHeight );
      } 
    }
  }
  </code></pre>
  
  <p>Now, the script above sort of does what I'm looking for but with some hick-ups. </p>
  
  <p>i) Upon loading the site it only adjusts the div height to the windows size, not meeting the children requirement. It only does this upon resizing the window.</p>
  
  <p>ii) While resizing the window, the div height will flicker back and forth between "auto" and window size. Depending on when you stop resizing it will take either of the two sizes as its height.</p>
  
  <p>Any ideas?</p>