title: Fixed header and footer with 100% scrollable content
body: <p>I'm trying to create a layout in CSS where the header and footer are fixed and the content box takes up the rest of the window. The content box must be at least 100% high and be scrollable only if there is more content than fits. I also need a left box inside the content box which is 100% high at all times.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/8tygrxk5/7/" rel="nofollow">jsFiddle</a> of my problem and here's the code I have so far
      
      </p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div id="left"&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="right"&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="cleaner"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;
  &lt;/div&gt;
  
  
  html, body {
      min-height: 100%;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
  }
  #header, #footer {
      position: fixed;
      height: 3em;
      width: 100%;
      background-color: green;
      z-index: 1000;    
  }
  #header {
      top: 0;
  }
  #footer {
      bottom: 0;
  }
  #content {
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 3em 0;
  }
  #left {
      width: 20%;
      min-height: 100%;
      background-color: orange;
      border: thick solid black;
      float: left;
      margin-bottom: 3em;
  }
  #right {
      width: 70%;
      float: right;
      margin-bottom: 3em;
  }
  div.cleaner {
      clear: both;
  }
  </code></pre>
  
  <p>The problem with the code is that the content is scrolling even if it's not needed. Also, the left box is not 100% high if there is more text in the right column.</p>
  
  <p>Is there a pure CSS solution for this or do I need to use JavaScript? I've literally spent hours trying to make it work but without luck. Any help would be appreciated!</p>