title: yet another HTML/CSS layout challenge - full height sidebar with sticky footer
body: <h2>UPDATE 2</h2>
  
  <p>So when the content in <code>#main</code> increases, it should push down the footer, like so:</p>
  
  <p><img src="https://i.stack.imgur.com/VKu73.png" alt="scroll"></p>
  
  <p>... so the footer should not be <code>position: fixed;</code>. It should be on the bottom when there is not enough content and should be pushed down when there is more content than the height of the page.</p>
  
  <p>In both scenarios, <code>#sidebar</code> needs to span the height from the bottom of <code>#header</code> to the top of <code>#footer</code>.</p>
  
  <h2>UPDATE</h2>
  
  <p>Some brutal specifics... the footer should be at the bottom whenever the content on the page is small, but when the content is large enough, it should push the footer down (this is the functionality described in the sticky footer links I've provided). I need the sidebar to always be between the header and footer at full height (from bottom of header to top of footer).</p>
  
  <p>This is quite the challenge for me. Ideas...?</p>
  
  <hr>
  
  <p>I'm trying to make this layout work <strong>without</strong> using JavaScript... here's what I mean in picture form:</p>
  
  <p><strong>BAD... current layout</strong>
  <img src="https://i.stack.imgur.com/EBfoq.png" alt="bad layout"></p>
  
  <p><strong>GOOD... desired layout</strong>
  <img src="https://i.stack.imgur.com/HICrI.png" alt="good layout"></p>
  
  <p>Notice how the sidebar extends all the way to the footer in the desired layout. I'm using the sticky footer approaches, <a href="http://ryanfait.com/sticky-footer/" rel="noreferrer">http://ryanfait.com/sticky-footer/</a> and <a href="http://www.cssstickyfooter.com/" rel="noreferrer">http://www.cssstickyfooter.com/</a>, and now I need to extend the sidebar to span the height from the header to the footer. Here's what I have...</p>
  
  <p><a href="http://jsfiddle.net/UnsungHero97/2ZhpH/" rel="noreferrer">http://jsfiddle.net/UnsungHero97/2ZhpH/</a></p>
  
  <p>... and the code in case jsFiddle is down...</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="header"&gt;&lt;div id="header-content"&gt;Header&lt;/div&gt;&lt;/div&gt;
      &lt;div id="content"&gt;
          &lt;div id="sidebar"&gt;Sidebar&lt;br/&gt;Sidebar&lt;br/&gt;Sidebar&lt;br/&gt;&lt;/div&gt;
          &lt;div id="main"&gt;Main&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="push"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;&lt;div id="footer-content"&gt;Footer&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html, body {
      margin: 0px;
      padding: 0px;
      min-height: 100%;
      height: 100%;
  }
  #wrapper {
      min-height: 100%;
      height: auto !important;
      height: 100%;
      margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  }
  #footer {
      height: 50px;
  }
  #footer-content {
      border: 1px solid magenta;
      height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
      padding: 8px;
  }
  .push {
      height: 50px;
      clear: both;
  }    
  
  #header {
      height: 50px;
  }
  #header-content {
      border: 1px solid magenta;
      height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
      padding: 8px;
  }
  #content {
      height: 100%;
  }
  #sidebar {
      border: 1px solid skyblue;
      width: 100px;
      height: 100%;
      float: left;
  }
  </code></pre>
  
  <p>Any suggestions on how to do this? I've tried using <code>position: fixed</code> but that approach becomes very ugly when the page is large enough and you need to scroll.</p>