html - フッターを一番下に押し込み、高さ 100%、列のサイズを同じ、純粋な CSS

Question

私は非常に多くの方法を試しましたが、検索して3日間働いた後も成功しませんでした.

HTML:

<div id="wrapper">
            <div id="header"></div>
            <div id="container">
                <div id="containertable">
                    <div id="leftbar"></div>
                    <div id="contents"></div>
                    <div id="rightbar"></div>
                </div>
            </div>
            <div id="footer"></div>
         </div>

CSS:

<style>
html{
   overflow-y: scroll;
}
html,
body {
   margin:0 auto;
   padding:0;
   height:100%;
   width: 1024px;
}
#wrapper {
   min-height:100%;
   position:relative;
   background: blueviolet;
}
#header {
   background:#ff0;
   width: 1024px;
   height: 70px;
}
#container {
   padding-bottom:60px;   /* Height of the footer */
   display: table;
}
#containertable{
    width: 1024px;
    display: table-row;
}
#leftbar, #rightbar{
    width: 170px;
    height: 100px;
    display: table-cell;
    background: brown;
}
#contents{
    width: 684px;
    height: 200px;
    display: table-cell;
    background: burlywood;
}
#footer {
   width: 1024px;
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

上記のコードと他のバージョンを使用して、1 番目と 2 番目のケースを取得できますが、列を 100% の高さと同じにして、フッターをページの下部にプッシュすることはできません。

下の画像では、すべての状況で 3 番目のケースを探しています。

フッター div をページの下部にプッシュする 3 つの異なるケース