title: 3 column css layout with sticky footer - columns 100% height?
body: <p>With combining two examples I've found:</p>
  
  <p><a href="http://alistapart.com/article/holygrail" rel="nofollow noreferrer">http://alistapart.com/article/holygrail</a> </p>
  
  <p><a href="http://mystrd.at/modern-clean-css-sticky-footer/" rel="nofollow noreferrer">http://mystrd.at/modern-clean-css-sticky-footer/</a></p>
  
  <p>I have come up with this layout.</p>
  
  <p><a href="http://jsfiddle.net/xVuh5/" rel="nofollow noreferrer">http://jsfiddle.net/xVuh5/</a></p>
  
  <p>And it is great but I would like to have the 3 columns 100% height.</p>
  
  <p>Can anyone help please?</p>
  
  <p>Thank you</p>
  
  <p>Body of the html and css script as asked by the SO editor validation for including jsfiddle in the text:</p>
  
  <p></p>
  
  <pre><code>&lt;div id="header"&gt;This is the header.&lt;/div&gt;
  
  &lt;div id="container"&gt;
  
      &lt;div id="center" class="column"&gt;
          &lt;h1&gt;This is the main content.&lt;/h1&gt;
          &lt;p&gt;Text Text&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;This is the footer.&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>    /*** 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;
      }
  </code></pre>
  
  <p>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. </p>
  
  <p><img src="https://i.stack.imgur.com/oVCk4.jpg" alt="enter image description here"></p>