title: Full height & width, fixed header, full content height with CSS
body: <p>I have been searching for this on SO, but I just could not find something exactly similar.
  What I am trying to achieve is to have a page, that is full in height and in width, but does have a fixed header. The content height needs to be the remaining area left, but that area needs to have a height of 100%, most of the html code found on SO is just using height: auto. Basically I want to do this so that I can style it: adding border etc. Here's the code so far:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;style type="text/css"&gt;
      body, html {
      height:100%;
      }
  
      body {
      margin:0;
      padding:0;
      }
  
      #header{
      height:50px; 
      background:green;
      width:100%; 
      }
  
      #wrapper {
      background:blue;
      position:relative;
      min-height:100%;
      height:auto !important;
      height:100%;
      }
  
      #content {
          margin: 10px;
          background-color: black;
          height: 100%;
          width: 100%;
  border: 3px dashed gray;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
      &lt;div id="header"&gt;header&lt;/div&gt;
      &lt;div id="content"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>