title: How to resize content area with CSS dynamically and no javascript
body: <p>I want is this:</p>
  
  <ul>
  <li>the blue area resizes with when the browser window resizes.</li>
  <li>The header is visible.</li>
  <li>the blue area starts where the header finishes (not behind the header or above).</li>
  <li>the blue area ends before the footer.</li>
  <li>between the blue area and the footer exist 5 yellow pixels.</li>
  </ul>
  
  <p>Is this possible only with CSS and HTML ( without any javascript ) ?</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en-US"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;title&gt;Test&lt;/title&gt;
  
      &lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/&gt;
      &lt;style&gt;
  
      *{
          margin:0px;
          padding:0px;
      }
  
      header, nav, article, footer, address {  
          display: block;  
      }
  
      header{
          position:relative; height: 50px; background-color:#2b2b2b;
      }
  
      footer{
          height: 50px; 
          width:100%; 
          bottom: 0px; 
          position: fixed; 
          background: red;
      }
  
      #explorer{
          position:relative; bottom:55px; 
      }
  
      #sections{
          width: 100%; height: 100%; bottom: 55px; position:fixed; background: blue;
      }
  
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body style="background-color:yellow"&gt;
      &lt;header &gt;
          &lt;h1&gt;Test&lt;/h1&gt;
      &lt;/header&gt;
    &lt;div id="explorer" &gt;
        &lt;div id="sections" &gt;
     &amp;nbsp;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;footer&gt;
         /* Footer Content */
    &lt;/footer&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>