title: Variable content div height using css with fixed header and footer
body: <p>I'm having a bit of trouble with some CSS, and am seeking some help from this wonderful community.</p>
  
  <p>I am trying to build a layout containing the following elements:</p>
  
  <p>1) A header area
  2) A footer area
  3) A left hand pane
  4) A content area</p>
  
  <p>I have come up with the following CSS, but I do not believe this is the best way of doing what I need.</p>
  
  <p>Please find below an image of what I am looking for, with all the details. Additionally, below is my current CSS and html.</p>
  
  <p>CSS:</p>
  
  <pre><code>* {
      margin: 0;
  }
  
  html, body {
     height: 100%;
     overflow: hidden;
          }
  
  #wrapper {
     min-height: 100%;
     height: auto !important;
     height: 100%;
     margin: 0 auto -100px; 
  }
  
  #leftbar {
     float: left;
     width: 350px;
     background-color: #EAEAEA;
     height: 100%;
     position: absolute;
     z-index: -1;
  }
  
  #rightbar {
  }
  
  #footer {
     height: 100px;            
  }               
  
  #header {
     height: 100px;
  }   
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="header"&gt;   &lt;/div&gt;
          &lt;div id="content"&gt;
              &lt;div id="leftbar"&gt;  &lt;/div&gt;
              &lt;div id="rightbar"&gt; &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;  &lt;/div&gt;                                                                          
  </code></pre>
  
  <p>Desired layout: </p>
  
  <p><img src="https://i.stack.imgur.com/5V1BE.jpg" alt="enter image description here"></p>
  
  <p>Please note that although I don't mind using jQuery and javascript to accomplish this, I'd like to avoid it.</p>
  
  <p>Any help will be greatly appreciated.</p>
  
  <p>Thanks!</p>