title: CSS layout with fixed top and bottom, variable height middle
body: <pre class="lang-none prettyprint-override"><code>+-------------------+
  |    Top (fixed)    |
  +-------------------+
  |                   |
  |                   |
  |   Middle (fill)   |
  |                   |
  |                   |
  +-------------------+
  |   Bottom (fixed)  |
  +-------------------+
  </code></pre>
  
  <p>The <strong>top</strong> and <strong>bottom</strong> are fixed divs. They are positioned on the top and bottom of browser window. I want the <strong>middle</strong> part to fill the rest of the window between top and bottom divs.</p>
  
  <p>If it's content is more than its height then i can use scrollbars. But its size should not exceed the window.</p>
  
  <p>My CSS and HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body, #main
  {
    height: 100%;
  }
  #content
  {
    background: #F63;
    width: 100%;
    overflow: auto;
    height: 100%;
    margin-bottom: -100px;
  }
  #footer
  {
    position: fixed;
    display: block;
    height: 100px;
    background: #abcdef;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main"&gt;
    &lt;div id="content"&gt;xyz&lt;/div&gt;
    &lt;div id="footer"&gt;abc&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>From this, the Footer shows in the bottom but, the Content div still fills the whole window which should have been [window-footer] height.</p>