title: CSS DIV-based table with header and limited height showing scrollbar when necessary - percentage heights
body: <p>I've searched high and low and cannot find a solution specific to this problem.  I'm trying to accomplish the following:</p>
  
  <ul>
  <li>Have a container DIV defined with a percentage height to serve as max-size container</li>
  <li>A secondary container DIV that provides a content size-based borde</li>
  <li>Have a header div that is fixed at the top of that DIV</li>
  <li>Have a list of DIVs (table-like) under the header</li>
  <li>When the list is short, the border is reduced to size of content</li>
  <li>When list if long (> height of outer container), scrollbar is shown for DIV list and not header.</li>
  </ul>
  
  <p>I put together the following simplified version:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              .panel { height: 10%; border: 1px solid red; overflow: hidden; margin-top: 10px; }
              .sizer { max-height: 100%; border: 1px solid blue; }
              .header { border-bottom: 1px solid black; }
              .scroll { max-height: 100%; overflow: auto; }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="panel"&gt;
              &lt;div class="sizer"&gt;
                  &lt;div class="wrap"&gt;
                      &lt;div class="header"&gt;Header&lt;/div&gt;
                      &lt;div class="scroll"&gt;
                          &lt;div&gt;Line1&lt;/div&gt;
                          &lt;div&gt;Line2&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="panel"&gt;
              &lt;div class="sizer"&gt;
                  &lt;div class="wrap"&gt;
                      &lt;div class="header"&gt;Header&lt;/div&gt;
                      &lt;div class="scroll"&gt;
                          &lt;div&gt;Line1&lt;/div&gt;
                          &lt;div&gt;Line2&lt;/div&gt;
                          &lt;div&gt;Line3&lt;/div&gt;
                          &lt;div&gt;Line4&lt;/div&gt;
                          &lt;div&gt;Line5&lt;/div&gt;
                          &lt;div&gt;Line6&lt;/div&gt;
                          &lt;div&gt;Line7&lt;/div&gt;
                          &lt;div&gt;Line8&lt;/div&gt;
                          &lt;div&gt;Line9&lt;/div&gt;
                          &lt;div&gt;Line10&lt;/div&gt;
                          &lt;div&gt;Line11&lt;/div&gt;
                          &lt;div&gt;Line12&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The two red boxes should be fixed size. Check<br/>
  The blue box should size to be the size of the content or size of red box maximum.  Check<br/>
  When contents in lower exceed red box size, scrollbar should be displayed under header.  Fail</p>
  
  <p>Any change I make that gets the scrollbar displayed causes the top blue box to enlarge to the size of it's container, red box.  e.g., { .scroll height: 100% } </p>
  
  <p>(The DIV.wrap does have a purpose - just not in this example.  It is intended to provide a double-border effect on the sizer, so it should be the same size as sizer all the time).</p>
  
  <p>Also, I have figured out some solutions where I used fixed (px) sizes for the DIVs, but this is not necessarily desired.  Especially on DIV.panel - this must be set to a percentage height.</p>