title: jquery fixing a side bar while scrolling, until bottom
body: <p>This code is taken from waypointarts.com and it's suppose to create a Fixing a side bar while scrolling, until bottom.
  problem is when right div is populated the left div's height even though set to 100# stay fixed to certain height, window/screen or something. how can I set it so its 100% height or equivalent to right div's height. </p>
  
  <p>HTML
      Header</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  
    &lt;div id="left"&gt;
  
      &lt;div id="sidebar"&gt;
  
        Sidebar Content
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;div id="right"&gt;
  
      This is the text of the main part of the page.
  
    &lt;/div&gt;
  
    &lt;div class="clear"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;Footer&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#header {
    background: #c2c2c2;
    height: 50px
  }
  
  #wrapper {
    width: 500px
  }
  
  #left {
    background: #d7d7d7;
    position: absolute; /* IMPORTANT! */
    width: 150px;
    height: 100%
  }
  
  #right {
    position: relative;
    width: 350px;
    float: right
  }
  
  #sidebar {
    background: #0096d7;
    width: 150px;
    color: #fff
  }
  
  .clear {
    clear: both
  }
  
  #footer {
    background: #c2c2c2
  }
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>$(document).ready(function () {
  
      var length = $('#left').height() - $('#sidebar').height() + $('#left').offset().top;
  
      $(window).scroll(function () {
  
          var scroll = $(this).scrollTop();
          var height = $('#sidebar').height() + 'px';
  
          if (scroll &lt; $('#left').offset().top) {
  
              $('#sidebar').css({
                  'position': 'absolute',
                  'top': '0'
              });
  
          } else if (scroll &gt; length) {
  
              $('#sidebar').css({
                  'position': 'absolute',
                  'bottom': '0',
                  'top': 'auto'
              });
  
          } else {
  
              $('#sidebar').css({
                  'position': 'fixed',
                  'top': '0',
                  'height': height
              });
          }
      });
  });
  </code></pre>
  
  <p>Image from waypoitsarts.com:</p>
  
  <p><img src="https://i.stack.imgur.com/UhW5w.gif" alt="Image from waypoitsarts.com"></p>