html - 柔軟な高さのヘッダーとフッター div の間の柔軟な div の高さ

Question

ここで見られるように、垂直方向とIE9+互換性 があるのと同じことを水平方向に達成したい

[編集]:オーバーフローの中間コンテンツにスクロール バーを持たせたいのですが、この場合、テーブルは役に立ちません。

jsフィドル

CSS:

.container{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: silver;
}

.top{
    width: 50px;
    height: 100%;
    position: relative;
    float: left;
    background-color: red;
}

.bottom{
    width: 50px;
    height: 100%;
    position: relative;
    float: right;
    background-color: green;
}

.middle{
    background-color: blue;
    overflow: hidden;
    height: 100%;
}

HTML:

<div class="container">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="middle"></div>
</div>

---

質問: JavaScript や固定値なしで可能ですか?

私はこのようなことをしたくありません:

.top-div {
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.middle-div{
    top: 50px;
    bottom: 50px;
    left: 0;
    right: 0;
    position: absolute;
}
.bottom-div{
    height: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
}

このシナリオでは、フッターまたはヘッダーの高さを変更したい場合、JavaScript を使用する必要があります。