title: Using CSS to make a panel with dynamic panel body height fill the rest of the parent container height
body: <p>I have a panel that has a header, body, and footer, and this panel needs to fill the screen (or its parent container) even if the content in the panel body overflows or not. if it does overflow, then the body will scroll. The header and footer heights are dynamic since they may change with different view port dimensions so I cannot hardcode the panel body height or padding to account for the header/footer. </p>
  
  <p>In other words, all I want is to have the panel with a header, body, and footer fill the screen so that there is no page scroll bar. The panel should always have 100% of the screen/container height even if the body content has a smaller height. If the panel body content has a greater height, then the panel body should scroll rather than the entire page.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/uhk9vzm1/3/" rel="nofollow">jsfiddle</a> example of my problem. If you uncomment the javascript, you will see what I want to happen. I do not want to use javascript, although CSS3 features are fine.</p>
  
  <p>Here is the basic HTML structure:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="panel"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h1&gt;A heading with a dynamic height&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
              &lt;!-- May be a lot or little content --&gt;
          &lt;/div&gt;
          &lt;div class="panel-footer"&gt;
              &lt;h1&gt;A footer with a dynamic height&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>