title: How to stretch a div to the viewport bottom without using absolute positioning?
body: <p>How to stretch a div (not the size of the viewport) to the viewport bottom without using absolute positioning?</p>
  
  <p>If I use absolute positioning to stretch my "main" div to the bottom on the viewport, then any newly added elements above main, say a nav bar, won't get re-positioned by the browser automatically since the "main" div with no longer be in the normal flow. </p>
  
  <p>And I really don't want to be recalculating top &amp; bottom positions of affected elements every time I add/remove a dynamic div (or other containing) in the normal flow if I have to go the absolute route.</p>
  
  <p><strong><a href="http://jsfiddle.net/johntrepreneur/nFC9R/2/" rel="nofollow">fiddle</a></strong>
  <br>
  <br>
  <br>
  <strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="header"&gt;
          HEADER&lt;br&gt;
          &lt;input id="btnNavBar" type="button" value="add/remove nav bar"/&gt;
      &lt;/div&gt;
      &lt;div id="main"&gt;
          MAIN CONTENT NEEDS TO STRETCH TO BOTTOM OF VIEWPORT, BUT NOT BE ABSOLUTE SO THAT IT WILL AUTOMATICALLY ADJUST FOR ANY NEWLY ADDED DYNAMIC ELEMENTS ABOVE IT SINCE IT'LL STILL BE IN THE NORMAL FLOW.
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>html, body {
      height: 100%;
      margin: 0px;
  }
  #wrapper {
      height: 100%;
      background-color: black;
  }
  #header {
      height: 50px;
      text-align: center;
      background-color: red;
  }
  #main {
      background-color: gray;
      height: 100%;
  }
  /* UNCOMMENT THIS SECTION TO MAKE THE STRETCHING WORK WITH ABSOLUTE POSITIONING, 
      BUT NOT FOR ANY NEWLY ADDED ELEMENTS */
  /*#wrapper {
      position: relative;
  }
  #main {
      height: auto;
      position: absolute;
      bottom: 0px;
      top: 50px;
  }*/
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$('#btnNavBar').click(function(){
      var $navBar = $('#navBar');
      if ($navBar.length == 0)
      {
          $('&lt;div&gt;').prop('id','navBar').css({'height':'20px', 
              'background-color':'yellow', 'text-align':'center'})
              .text('Dynamically Added Nav Bar').insertAfter('#header');
      }
      else
          $navBar.remove();
  });
  </code></pre>