My approach would be slightly different.

A Pure CSS Solution, Fully Responsive, No need to set fixed heights for header or footer

Check out the Demo here

The only downside is that you have to structure your HTML in a specific order (Footer should come 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>

You can choose whether the column width is fixed or not based on your preference.

Possible solution: DEMO

To adjust the height, I have utilized a wrapper class.

.wrapper{
    height: auto !important;
    min-height: calc(100% - 60px);/* 100% - 30px header - 30px footer*/
}

Also, make adjustments to the width of the columns.

To achieve this design, you can utilize the power of CSS tables.

View Example with Little Content on FIDDLE

View Example with Lots of Content on FIDDLE

(Assuming a header height of 30px and a footer height of 100px)

Relevant CSS

#container
{
    display: table;
    width: 100%;
    height: 100%;
    margin: -30px 0 -100px;
    padding: 30px 0 100px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#container .column {
    display: table-cell;
}

To tackle the issue at hand, one can employ a technique involving negative margin and positive padding.

If you wish to view a demonstration, visit http://jsfiddle.net/6RQES/1/

Here is the HTML code snippet:

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


    <div id="container">
    <div id="center" class="column">
        <h1>This is the main content.</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    </div>

    <div id="left" class="column">
        <h2>This is the left sidebar.</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    </div>

    <div id="right" class="column">
        <h2>This is the right sidebar.</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    </div>
    </div>


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

Below are the corresponding styles for this markup:

    /*** 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%;
    }
    #maincontainer{
        position:relative;
        min-height:100%;
        padding-bottom: 32px;
    }
    #container {
        padding-left: 200px;      /* LC fullwidth */
        padding-right: 190px;     /* RC fullwidth + CC padding */
        overflow: hidden;
    }

    #container .column {
        position: relative;
        float: left;
        padding-bottom: 8000px;
        margin-bottom: -8000px;
    }

    #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;
        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;
    }

Take a look at the DEMO

I've made some adjustments to the CSS. Check it out, hopefully, it will be beneficial.

Updated CSS

<style>
/*** Key Code ***/
* /* To Reset CSS */
{
padding: 0;
margin: 0;
}

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

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

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

#container {
padding-left: 185px; /* LC fullwidth */
padding-right: 175px; /* RC fullwidth + CC padding */
display: table;
height: 98%;
}

#container .column {
position: relative;
float: left;
display: table;
height: 95%;
}

#center {
padding: 0 15px; /* CC padding */
width: 97%;
}

#left {
width: 170px; /* LC width */
padding: 0 10px; /* LC padding */
right: 230px; /* LC fullwidth + CC padding */
margin-left: -105%;
}

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

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

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

/*** Aesthetic Enhancements ***/

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;
}
</style>

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" bgcolor="#333366" colspan="3">example text here</td>
</tr>
<tr>
<td bgcolor="#666633" height="1200px" width="20%">more example text</td>
<td bgcolor="#00FF00" height="1200px" width="60%">more example text</td>
<td bgcolor="#993300" height="1200px" width="20%">more example text</td>
</tr>
<tr><td colspan="3" bgcolor="#CC9900">final example text</td></tr>
</table>

Check out the updated code here: http://jsfiddle.net/xVuh5/6/
I made a lot of changes to improve it:

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

    body {
        min-width: 630px;         
        margin: 0 0 100px;
    }

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

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

    #center.column{
        position:relative;
        min-width:100px;
    }

    #center {
        padding: 10px 20px;
        width: 100%;
        margin-right:150px;
        margin-left:150px;
    }

    #left {
        width: 130px;
        padding: 0 10px;
        left: 0px;
    }

    #right {
        width: 130px; 
        padding: 0 10px;
        right:0px;
    }

    #footer {
        clear: both;
        margin-bottom: 0px;
        height: 100px;
        width: 100%;
    }

    /*** IE Fix ***/
    * html #left {
        left: 0px;
    }

    /*** Just for Looks ***/

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

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

    #left {
        background: #66F;
    }

    #center {
        background: #DDD;
    }

    #right {
        background: #F66;
    }

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

UPDATE: For an even better solution, check out avrahamcool's solution and use clean code for optimal results.

To easily solve this issue, simply add height:100%; to both #container .column and #container. I tested it out in your JSFiddle and it appeared to work perfectly. The key thing to note is that the div containing the columns also requires 100% height.

Here is the revised CSS code:

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

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

One solution is to use "display: table;" as shown here in this JSFiddle

Unfortunately, using float:left will not result in divs being the same height.

    #container {
        display: table;
    }
    #container .column {
        position: relative;
        float: top;
    }
    #center {
        ...
        display: table-cell;
    }
    #left {
        ...
        display: table-cell;
    }
    #right {
        ...
        display: table-cell;
    }

Here is the recommended order for the divs:

  <div id="left" class="column">
  </div>
  <div id="center" class="column">
  </div>
  <div id="right" class="column">
  </div>

Don't forget to adjust the header and footer positioning:

  #footer {
      ...
      position: fixed;
  }

If you want to reach your objective, consider using jQuery:

var windowHeight = $(window).height();   // retrieves browser viewport height
var documentHeight = $(document).height(); // fetches HTML document height - choose one as needed

Next step:

$('.columns').height(windowHeight);

This approach seems like the most suitable solution.

To accomplish this, utilize the function below and invoke it on the body's onload event.

<body onload="adjustHeight()"></body>

Next, include the following function in your code and ensure that you have included the JQuery Library in your HTML document.

function adjustHeight()
{
var element = document.getElementById('container');
$(element).css("height", window.innerHeight - 100);
var heightValue = $(element).css("height");
$("#left").css("height",20+heightValue);
$("#center").css("height",heightValue);$("#right").css("height",20+heightValue);
}

When working with elements of varying heights, it is important to utilize the min-height property to ensure adequate spacing.

min-height:900px;

Alternatively, you can specify a static height by using the following CSS:

height:900px;
overflow:scroll; or overflow:auto;

To keep it simple.

HTML:

<div class='section'>
    content
</div>
<div class='section'>
    content
</div>
<div class='section'>
    content
</div>

CSS:

html, body { height: 100%; } /** Essential for proper functionality as the parent divs need to have a height of 100% for the children to also be 100%. **/

.section {
    width: calc(100%/3); /** Ensures equal width for all divs **/
    height: 100%; /** Sets height to 100% **/
    display: inline-block;
}

.footer {
    position: absolute; /** Allows 'bottom' property to work correctly **/
    bottom: 0; /** Positions at the bottom of the page **/
}

Trust this clarifies things.

I made some modifications to your code snippet by including a height parameter in the left, right, and center sections of the CSS. This height can be set to any value and will adapt to different screen sizes, making it a much simpler solution compared to others.

Update: The background of the left, center, and right sections will only extend as far as the text itself without specifying a specific height. Setting the height to 100% does not change anything; it only serves to override a parent element with a defined height (for example, if all paragraph tags had a fixed pixel height but you want one to cover all the text). If you wish to make the background cover the entire page, you would need to use an extremely large height value or find another solution, as simply setting it to 100% will not achieve this. This limitation is due to how the browser interprets the 100% height property. Please note that my explanation is based on limited experience with one browser, so not all solutions may work universally across different browsers.

Follow these steps:

.column{
   flex-direction: row;
   width:100%;
}

This method is straightforward, efficient, and utilizes CSS.