css - フレームセットを CSS に変換する

Question

この古いフレームセットに基づいて CSS ページ レイアウトを構築しようとしています。

<frameset cols="30%,70%">
    <frame>left</frame>
    <frameset rows="80%,20%">
        <frame>top</frame>
        <frame>bottom</frame>
    </frameset>
</frameset>

15 年前は簡単だったことが、最近では少し複雑になっているようです。以下のHTMLを書きました。

<div id="container">
    <div id="left">left</div>
    <div id="right">
        <div id="top">top</div>
        <div id="bottom">bottom</div>
    </div>
</div>

この CSS とともに:

#container {
    border: 1px solid black;
    height: 300px;
}

#left {
    border: 1px solid red;
    float: left;
    width: 30%;
    height: 100%;
    overflow-y: scroll;
}

#right {
    border: 1px solid blue;
    margin-left: 30%;
    height: 100%;
}

#top {
    border: 1px solid red;
    height: 80%;
    overflow-y: scroll;
}

#bottom {
    border: 1px solid red;
    height: 20%;
}

ここにデモを置きます。

これまでに達成したいことと失敗したことは次のとおりです#bottom。高さは、パーセントではなく、特定のピクセルの高さでなければなりません。私がこれを行うとき、私は混乱し#topます。絶対位置を使用して下部に固定しようとしましたが、残りの高さを使用する#bottom方法がわかりません。#top

どんなアイデアでも大歓迎です。ありがとうございました。