html - display:table スタイルのネストされた div は、IE で 100% の高さにストレッチされません。

Question

FireFox、Chrome、Opera では完全に動作しますが、IE では動作しません。これらの 3 つの最新ブラウザーでは垂直方向と水平方向に伸びますが、IE では伸びません。display:tableそれはcss 技術に基づいています。

この私のコード:

<div id="container">
    <div id="header"> header header header header header </div>
    <div id="contentWraper">
        <div id="content">
            <div id="columnsWraper">
                <div id="leftPanel">left panel <br /> left panel <br /> left</div>
                <div id="rightPanel">right panel</div>
            </div>
        </div>
    </div>
    <div id="footer">footer</div>    
</div>

CSS:

html, body { height: 100%; background: gray; margin: 0; padding: 0; }
#container { display: table; height: 100%; width: 100%;}
#header { height: 0%; display: table-row;}
#contentWraper  {height: 100%; background: lightgray; display: table-row;}
#content {height: 100%; background: lightgray; display: table; width: 100%;}
#columnsWraper    {height: 100%;  display: table-row;}
#footer { height: 0%; display: table-row;}
#leftPanel { background: wheat; width: 100px;  display: table-cell; }
#rightPanel { background:yellowgreen; display: table-cell; }

http://jsfiddle.net/wftHq/6/

「display:table」スタイルでネストされた div を使用するまで、IE でも機能します。私はそれを使わなければなりませんでした。IE でのみ、「leftPanel」と「rightPanel」が 100% の高さを埋めません。IE で修正する方法はありますか? 私のコードを IE で動作するように変更する方法を知っている人はいますか。JavaScriptの使用を避けようとしています。