title: content 100% with footer fixed at bottom
body: <p>I'm trying to create a template with footer fixed at bottom. I have tried different methods successfully, but now I find it impossible to expand the secondary content div at 100% hight. I have tried Ryan Fait, David Walsh and search other methods. I know it´s a common question but in stackoverflow I have not seen a solution yet.</p>
  
  <p>You can see an example here: <a href="http://jsfiddle.net/charlyta/hyfUe/" rel="nofollow">http://jsfiddle.net/charlyta/hyfUe/</a></p>
  
  <pre><code>    * {
          margin: 0;
          padding: 0;
          }
  
      body, html {
          height: 100%;
          }
  
      #container {
          background: #f00; /* styling only */
          width: 100%;
          margin: 0 auto;
          position: relative;
          height: auto !important;
          min-height: 100%;
          height: 100%;
  
  
  
          }
  
      #content {
          padding-bottom: 100px;
          width: 980px;
          background-color: #FFF;
          margin: 0 auto;
          min-height: 100%;
          margin-top: -20px;
          -webkit-box-shadow: 0px 1px 3px rgba(27, 57, 50, 0.44);
          -moz-box-shadow:    0px 1px 3px rgba(27, 57, 50, 0.44);
          box-shadow:         0px 1px 3px rgba(27, 57, 50, 0.44);
          -moz-border-radius: 5px;
          border-radius: 5px;
          position: relative;
           max-height:100%;
          height:auto !important;
           height: 100%;
          overflow: hidden;
  
          }
  
      #footer {
          position: absolute;
          left: 0;
          bottom: 0;
          height: 100px;
          width: 100%;
          background: #0f0;
          }
  
          #header {
  
          height: 100px;
          width: 100%;
          background: #0f0;
          }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>
      </p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="header"&gt;
  header
  &lt;/div&gt;
      &lt;div id="content"&gt;
          Your content goes here
      &lt;/div&gt;
      &lt;div id="footer"&gt;
          Footer here
      &lt;/div&gt;        
  &lt;/div&gt;
   &lt;/body&gt;
  </code></pre>