html - CSS Table Styles - 表の行を取得してコンテンツ領域全体を埋める

Question

CSS テーブル表示を使用してページをレイアウトしようとしていますが、メイン コンテンツ領域がヘッダーとフッターの間の領域全体 (垂直方向) を占有するのに問題があります。メインの div には、必ずしも画面の長さを拡張しないいくつかの浮動要素が含まれています。基本的に、私が何をするにしても、メイン コンテンツの領域は、これらの要素の垂直方向の高さによって決まります。これについて私にできることはありますか？ありがとう！

HTML:

<div id="all-container">
    <div id="header">
  ...
    </div>
    <div id="table-container">
        <div id="content">
            <div id="side-bar">
               ...      
            </div>
            <div id="main">
               ... some content that's floated ...
            </div>
        </div>
    </div>
    <div id="footer"></div>
</div>

CSS:

#all-container {
    margin:0px;
    position:relative;
    min-height:100%;
    background-color:#E6DCD8;
}

#header {
    height:60px;
    padding-left:20px;
    padding-right:20px;
    background-color:#685642;
}

#table-container {
    display:table;
    height:100%;
}

#content {
    display:table-row;
    height:100%;
}

#side-bar {
    display:table-cell;
    vertical-align:top;
    padding-right:100px;
    height:100%;
    padding-bottom:60px;
}

#main {
    display:table-cell;
    vertical-align:top;
    border-left-style:solid;
    border-left-width:normal;
    border-left-color:#685642;
    padding-bottom:60px;
    height:100%;
}

#footer {
    position:absolute;
    width:100%;
    height:50px;
    bottom:0px;
    background-color:#685642;
}