CSS Высота 100% + переполнение: автоматически не отображается весь контент гнезда

Question

В основном у меня есть одностраничное приложение HTML со всей фиксированной позицией, и я хочу, чтобы на одной панели было прокручиваемое содержимое. Все работает так, как ожидалось, но я не могу прокрутить до конца моего внутреннего контейнера содержимого. Я попытался переместить все в abs pos, я пробовал все решения, которые я смог найти на SO, которые связаны, но не кубики. Вот скрипка (http://jsfiddle.net/yhhjL/) и вот грубый макет моей марки и CSS:

HTML

<header> 
    <p>Company</p> 
</header> 

<div class="fixed-row-one"></div> 

<div class="fixed-row-two"></div> 

<div class="fixed-stage-left"> 

    <div class="scrollable"> 

     <table cellpadding="0" cellspacing="0"> 

      <tr> 
       <td>First</td> 
       <td>Second</td> 
       <td>Third</td> 
       <td>Fourth</td> 
      </tr> 

      <tr> 
       <td>First</td> 
       <td>Second</td> 
       <td>Third</td> 
       <td>Fourth</td> 
      </tr> 

      <tr> 
       <td>First</td> 
       <td>Second</td> 
       <td>Third</td> 
       <td>Fourth</td> 
      </tr> 

      <tr> 
       <td>First</td> 
       <td>Second</td> 
       <td>Third</td> 
       <td>Fourth</td> 
      </tr> 

      <tr> 
       <td>First</td> 
       <td>Second</td> 
       <td>Third</td> 
       <td>Fourth</td> 
      </tr> 

      <tr> 
       <td>First</td> 
       <td>Second</td> 
       <td>Third</td> 
       <td>Fourth</td> 
      </tr> 

      <tr> 
       <td>First</td> 
       <td>Second</td> 
       <td>Third</td> 
       <td>Fourth</td> 
      </tr> 

      <tr> 
       <td>First</td> 
       <td>Second</td> 
       <td>Third</td> 
       <td>Fourth</td> 
      </tr> 

      <tr> 
       <td>First</td> 
       <td>Second</td> 
       <td>Third</td> 
       <td>Fourth</td> 
      </tr> 

      <tr> 
       <td>First</td> 
       <td>Second</td> 
       <td>Third</td> 
       <td>Fourth</td> 
      </tr> 

      <tr> 
       <td>First</td> 
       <td>Second</td> 
       <td>Third</td> 
       <td>Fourth</td> 
      </tr> 

      <tr> 
       <td>First</td> 
       <td>Second</td> 
       <td>Third</td> 
       <td>Fourth</td> 
      </tr> 

      <tr> 
       <td>First</td> 
       <td>Second</td> 
       <td>Third</td> 
       <td>Fourth</td> 
      </tr> 

      <tr> 
       <td>First</td> 
       <td>Second</td> 
       <td>Third</td> 
       <td>Fourth</td> 
      </tr> 

      <tr> 
       <td>First</td> 
       <td>Second</td> 
       <td>Third</td> 
       <td>Fourth</td> 
      </tr> 

      <tr> 
       <td>First</td> 
       <td>Second</td> 
       <td>Third</td> 
       <td>Fourth</td> 
      </tr> 

      <tr> 
       <td>First</td> 
       <td>Second</td> 
       <td>Third</td> 
       <td>Fourth</td> 
      </tr> 

      <tr> 
       <td>Last</td> 
       <td>Last</td> 
       <td>Last</td> 
       <td>Last</td> 
      </tr> 

     </table> 

    </div> 

</div> 

<div class="fixed-stage-right"></div> 

CSS

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; 
} 

Любые идеи будут оценены.

Answer 1

http://jsfiddle.net/yhhjL/2/

Проблема заключалась в том, что неподвижная стадия левого элемента происходит от страницы, так что проблема не была его прокрутка вниз. Элемент просто был отрезан.

Удаляя высоту фиксированной ступени-левую и заменить его

.fixed-stage-left { 
    width: 50%; 
    top:150px; /*Edited here */ 
    bottom:0; /*Edited here */ 
    position: fixed; 
    overflow: hidden; 
    top: 150px; 
    left: 0; 
    background: #f1f1f1; 
    color: #000; 
} 

Это заставляет браузер регулировать высоту, чтобы соответствовать между этими двумя позициями.

Подробнее об этом виде проблемы: CSS: Setting width/height as Percentage minus pixels