メインコンテンツの量に関係なく、フッターをウィンドウ下部に固定して、さらにサイドバーの高さをウィンドウ100%にする方法のメモです。それぞれを実現する方法はいろいろあるんですが、今回はその合わせ技でシンプルなものをご紹介します。
ちなみに以前書いた記事はこちら↓
フッターをウィンドウ下部に固定する2つの方法

【HTML】

<div class=&quot;page-container&quot;>
    <div class=&quot;header&quot;>Header</div>
    <div class=&quot;page-content&quot;>
        <div class=&quot;side&quot;>Side</div>
        <div class=&quot;main&quot;>
            <div class=&quot;main-inner&quot;>Contents</div>
            <div class=&quot;footer&quot;>Footer</div>
        </div>
    </div>
</div>

【css】

html, body { height: 100%; }    /* ブラウザ領域分確保 */
.page-container {
    width: 100%;
    position: relative;
    height: auto !important;    /* IE6対策 */
    height: 100%;             /* IE6対策 */
    min-height: 100%;
}
.side {
    float: left;
    width: 210px;
    height: 100%;
    position:absolute;
}
.main {
    margin-left: 210px;
    padding-bottom: 40px;
}
.footer {
    height: 40px;
    position: absolute;
    bottom: 0;
}

フッターをウィンドウ下部に固定するのは以前ご紹介した「cssでpositionを使って固定する」方法です。
html要素とbody要素の高さを100%にしてブラウザ領域を確保します。そして、.page-containerにposition:relativeをセットして、内包されているfooterにはposition:absoluteとbottom:0でウィンドウ下部に固定します。
また、コンテンツとフッターが被らないように、フッターの高さの分だけpadding-bottomを指定しています。

サイドにもposition:absoluteを設定します。高さはウィンドウ100%にしたいので、height:100%を指定します。

参考サイト

【CSS】メインコンテンツの高さとサイドバーの高さを揃える方法