html - IE7 で絶対配置コンテナーを使用してこのオーバーフローの問題を修正するにはどうすればよいですか?

Question

IE8+ ではうまく機能するが IE7 では機能しないレイアウトを作成しました。問題は、絶対に配置された #container (ヘッダーの下にプッシュする上部と、本文を埋めるための 0 の下部がある) が、本文だけではなく、コンテンツ全体の長さを ie7 で埋めてしまうことです。

何が起こっているのかを示すためにjsfiddle http://jsfiddle.net/TPNpy/97/をセットアップしました。助けていただければ幸いです。

ie7 の JavaScript を使用して高さを設定するのは私の最後の手段であり、これが唯一の方法であるとは確信していません。

ありがとう

jsfiddle のコードを見た方が簡単ですが、基本的な構造と CSS は次のとおりです。

#container { background-color: #333; width: 100%; position: absolute; bottom: 0; top: 80px; }
#sidebar { background-color: #333; width: 170px; height: 100%; float: left; overflow: hidden; overflow-y: auto; }
#content { background-color: #F9F9F9; height: 100%; margin-left: 170px; overflow: hidden; overflow-y: auto; }

<div id="container">
  <div id="sidebar">
    Sidebar Content (which allows scrolling when very long)
  </div>
  <div id="content">
    Main Content (which allows scrolling when very long)
  </div>
</div>