title: DIV for modal display that has fixed header and footer, scrollable content, and no fixed pixel values for content height
body: <p>I have been stumped on how to create a DIV for a modal display that uses a fixed header and footer, scrollable content area, and relies solely on percentage values for width/height of the holder and the content body. Disclaimer: I do not know much about CSS.</p>
  
  <p>Here is what I want:</p>
  
  <ul>
  <li>DIV with 65% width, 60% height, centered on page
  <ul>
  <li>Header: 100px tall, fixed position</li>
  <li>Content: Whatever is left in the DIV tall, fixed position, scrollable content</li>
  <li>Footer: 100px tall, fixed position</li>
  </ul></li>
  </ul>
  
  <p>Edit: <a href="http://jsfiddle.net/Uq5yC/" rel="nofollow">JSFiddle</a></p>
  
  <p>Here's my attempt:</p>
  
  <pre><code>html, mbody {
      overflow:auto;
  }
  
  #mholder{
      padding: 10px 10px 10px 10px;
      width:  65%;
      height: 60%;
      background-color: white;
      position: absolute;
      top:0;
      bottom:0;
      left:0;
      right:0;
      margin: auto;
  }
  
  #mheader{
      position: fixed;
      height: 100px;
      left:0;
      top:0;
      width: 100%;
  }
  
  #mbody{
      width:100%;
  }
  
  #mfooter{
      height:100px;
      width:100%;
      position: fixed;
      left: 0;
      bottom: 0; 
  }
  </code></pre>
  
  <p>Here's what I have on the page:</p>
  
  <pre><code>&lt;div id="mholder"&gt;
      &lt;div id="mheader"&gt;Header text&lt;/div&gt;
      &lt;div id="mbody"&gt;Long body text...&lt;/div&gt;
      &lt;div id="mfooter"&gt;Footer text&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What's happening is that the header is appearing in the very top-left of my <em>page</em>, not the modal display; ditto for the footer on the bottom-right; the modal area (which should be identified by a white background) is definitely not 65%/60% of the page, and the <code>mbody</code> html is kind of overlapping the <code>mholder</code> div haphazardly.</p>
  
  <p>Edit: <a href="http://jsfiddle.net/Uq5yC/" rel="nofollow">JSFiddle</a></p>