title: Fixed overlay with dynamic content + scrolling
body: <p>This is what I am trying to accomplish:</p>
  
  <ol>
  <li>A fixed container that lays over rest of page with margin.</li>
  <li>Overlay container contains a header, body and footer.</li>
  <li>Header and footer are sticky to top and bottom of overlay container.</li>
  <li>Body has dynamic content and is supposed to be scrollable if content is larger than available space.</li>
  </ol>
  
  <p>Here is a solution that works perfectly, if header and footer have fixed height. You also find the solution <a href="http://jsfiddle.net/3bz9trzq/1/" rel="nofollow">here</a>.</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 {
      width: 100%;
      height: 100%;
  }
  
  .overlay {
      position: fixed;
      left: 30px;
      right: 30px;
      top: 30px;
      bottom: 30px;
      background-color: #f00;
  }
  
  .container {
      position: relative;
      height: 100%;
      width: 100%;
  }
  
  .inner {
      position: absolute;
      left: 0;
      right: 0;
      top: 60px;
      bottom: 30px;
      overflow-x: hidden;
      overflow-y: scroll;
      background-color: #0f0;
  }
  
  .header {
      line-height: 60px;
      height: 60px;
      position: absolute;
      top: 0;
      width: 100%;
      background-color: #00f;
  }
  
  .footer {
      line-height: 30px;
      height: 30px;
      position: absolute;
      bottom: 0;
      width: 100%;
      background-color: #00f;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="overlay"&gt;
      &lt;div class="container"&gt;
          &lt;div class="header"&gt;
              Header
          &lt;/div&gt;
          &lt;div class="footer"&gt;
              Footer
          &lt;/div&gt;
          &lt;div class="inner"&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
              Inner Content&lt;br /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;
  Page Page Page Page Page Page Page Page &lt;br /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>How to I accomplish the same result if header and footer were not fixed and were of dynamic content themselves?</strong></p>
  
  <p><em>I am not looking for a Javascript solution</em></p>