html - CSS の高さ 100% + オーバーフロー: 自動でネストされたコンテンツがすべて表示されない

Question

基本的に、私はすべて固定位置の 1 ページの HTML アプリを持っており、1 つのペインだけにスクロール可能なコンテンツを持たせたいと考えています。すべてが期待どおりに機能していますが、内部コンテンツ コンテナーの一番下までスクロールできません。私はすべてを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;
}

どんなアイデアでも大歓迎です。