3 column css layout with sticky footer - columns 100% height?

Question

With combining two examples I've found:

http://alistapart.com/article/holygrail

http://mystrd.at/modern-clean-css-sticky-footer/

I have come up with this layout.

http://jsfiddle.net/xVuh5/

And it is great but I would like to have the 3 columns 100% height.

Can anyone help please?

Thank you

Body of the html and css script as asked by the SO editor validation for including jsfiddle in the text:

<div id="header">This is the header.</div>

<div id="container">

    <div id="center" class="column">
        <h1>This is the main content.</h1>
        <p>Text Text</p>
    </div>

</div>

<div id="footer">This is the footer.</div>

    /*** The Essential Code ***/
    * /* For CSS Reset */ 
    { 
        padding: 0; 
        margin: 0; 
    } 

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        min-width: 630px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
        margin: 0 0 100px; /* bottom = footer height */
    }

    html, body {
        height: 100%;
        width: 100%;
    }

    #container {
        padding-left: 200px;      /* LC fullwidth */
        padding-right: 190px;     /* RC fullwidth + CC padding */
    }

    #container .column {
        position: relative;
        float: left;
    }

    #center {
        padding: 10px 20px;       /* CC padding */
        width: 100%;
    }

    #left {
        width: 180px;             /* LC width */
        padding: 0 10px;          /* LC padding */
        right: 240px;             /* LC fullwidth + CC padding */
        margin-left: -100%;
    }

    #right {
        width: 130px;             /* RC width */
        padding: 0 10px;          /* RC padding */
        margin-right: -100%;
    }

    #footer {
        clear: both;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
    }

    /*** IE Fix ***/
    * html #left {
        left: 150px;              /* RC fullwidth */
    }

    /*** Just for Looks ***/

    body {
        margin: 0;
        padding: 0;
        background: #FFF;
    }

    #header, #footer {
        font-size: large;
        text-align: center;
        padding: 0.3em 0;
        background: #999;
    }

    #left {
        background: #66F;
    }

    #center {
        background: #DDD;
    }

    #right {
        background: #F66;
    }

    #container .column {
        padding-top: 1em;
        text-align: justify;
    }

As I see the first answers coming in are missing the point of my question, I am adding this image to make the question clearer.

Answer 1

Actually, I would do it differently.

Pure CSS solution, Totally responsive, Without fixing any height (header or footer)

Here's the Demo

The only downsize, is that you have to build your HTML in a certain order. (Footer comes before the columns)

<div class="Container">
    <div class="Header">
        <h1>Header</h1>
    </div>
    <div class="HeightTaker">
        <div class="Wrapper Container Inverse">
            <div>
                <div class="Footer">
                </div>
            </div>
            <div class="HeightTaker">
                <div class="Wrapper Content">
                    <div class="Table">
                        <div class="Column C1">
                        </div>
                        <div class="Column C2">
                        </div>
                        <div class="Column C3">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

The column width may be fixed, or not.. to you're will.