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