title: 100% height column with fixed sidebar
body: <p>I'm stuck trying to get this to work. It looks right when the content of the main column fills the page height but not when it doesn't.</p>
  
  <p>Looks right: <a href="http://jsfiddle.net/creativetags/ngv4H/1/" rel="nofollow">http://jsfiddle.net/creativetags/ngv4H/1/</a></p>
  
  <p>Doesn't look right: <a href="http://jsfiddle.net/creativetags/EAuBc/1/" rel="nofollow">http://jsfiddle.net/creativetags/EAuBc/1/</a></p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;div class='container-wrap'&gt;
          &lt;nav class='tabnav'&gt;Some nav menu items here&lt;/nav&gt;
          &lt;div class='container-inner'&gt;
              &lt;div class='clearfix' id='mainwrap'&gt;
                  &lt;div class='columns' id='main'&gt;
                       &lt;h2&gt;Main content scrolls here&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class='columns' id='side'&gt;
                  &lt;div class="sidecontent"&gt;
                      &lt;p&gt;Fixed Side panel&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm using a faux sidebar column that is fixed, so when you scroll the main column it stays in view.</p>
  
  <p>I need the background of <code>.container-inner</code> to fill to the bottom of the page, even when the content doesn't reach the bottom. </p>
  
  <p><code>.tabnav</code> needs to show the background image from the body tag, so <code>.container-inner</code> can't start from the top of the page.</p>