title: CSS Height 100% + overflow: auto not showing all of nest content
body: <p>Basically I have a one page HTML app with everything fixed position, and I only want one pane to have scrollable content. Everything is working as expected, but I'm unable to scroll to the bottom of my inner content container. I've tried moving everything to abs pos, I've tried all the solutions I've been able to find on SO that are related, but no dice. Here is a fiddle (<a href="http://jsfiddle.net/yhhjL/" rel="noreferrer">http://jsfiddle.net/yhhjL/</a>) and here is a crude mock of my mark up and CSS:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;header&gt;
      &lt;p&gt;Company&lt;/p&gt;
  &lt;/header&gt;
  
  &lt;div class="fixed-row-one"&gt;&lt;/div&gt;
  
  &lt;div class="fixed-row-two"&gt;&lt;/div&gt;
  
  &lt;div class="fixed-stage-left"&gt;
  
      &lt;div class="scrollable"&gt;
  
          &lt;table cellpadding="0" cellspacing="0"&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Fourth&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Fourth&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Fourth&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Fourth&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Fourth&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Fourth&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Fourth&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Fourth&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Fourth&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Fourth&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Fourth&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Fourth&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Fourth&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Fourth&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Fourth&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Fourth&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Fourth&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;Last&lt;/td&gt;
                  &lt;td&gt;Last&lt;/td&gt;
                  &lt;td&gt;Last&lt;/td&gt;
                  &lt;td&gt;Last&lt;/td&gt;
              &lt;/tr&gt;
  
          &lt;/table&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="fixed-stage-right"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
      margin:0;
      padding: 0    
  }
  
  header {
      width: 100%;
      height: 50px;
      position: fixed;
      background: black;
      color: white;
  }
  
  .fixed-row-one {
      width: 100%;
      height: 50px;
      position: fixed;
      top: 50px;
      background: #AAA;
      color: white;
  }
  
  .fixed-row-two {
      width: 100%;
      height: 50px;
      position: fixed;
      top: 100px;
      background: #e51837;
      color: white;
  }
  
  .fixed-stage-left {
      width: 50%;
      height: 100%;
      position: fixed;
      overflow: hidden;
      top: 150px;
      left: 0;
      background: #f1f1f1;
      color: #000;
  }
  
  .scrollable {
      width: 100%;
      height: 100%;
      background: #262626;
      overflow: auto;
      position: absolute;
  }
  
  .scrollable table tr{
      width: 100%;
      height: 50px;
      color: white;
      border-bottom: 1px solid #CCC;
  }
  
  .fixed-stage-right {
      width: 50%;
      height: 100%;
      position: fixed;
      overflow: hidden;
      top: 150px;
      right: 0;
      background: #0cf;
      color: #000;
  }
  </code></pre>
  
  <p><strong>Any ideas would be much appreciated.</strong></p>