title: How to create a fixed header and footer with dynamic content?
body: <p>I have to make a layout with a <code>.header</code> and <code>.content</code> like with fixed height (for example 100px) and 100% width.</p>
  
  <p>Then, I have to put a content with dynamical height that cover the void space.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- [...] --&gt;
  &lt;style type="text/css"&gt;
    body {
      margin: 0;
      padding: 0;
    }
    
    .wrapper {
      height: 100%;
      width: 100%;
      position: absolute;
    }
    
    .header {
      position: absolute;
      top: 0;
      height: 100px;
      width: 100%;
      background: #0F0;
    }
    
    .footer {
      position: absolute;
      bottom: 0;
      height: 100px;
      width: 100%;
      background: #0F0;
    }
    
    .content {
      position: absolute;
      height: 100%;
      width: 100%;
      background: #F00;
      padding: 100px 0;
      margin: -100px 0;
    }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="wrapper"&gt;
      &lt;div class="header"&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
      &lt;/div&gt;
      &lt;div class="footer"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This layout HAD to permit me to put a header and footer with fixed height, and a content with images that scale dimensions (inside a <code>div.content</code>).</p>