title: dynamic div height with static footer (css only)
body: <p>I have a slide out menu that is absolute positioned when opened to top:0, bottom: 0, right: 0 and has a width of 480px.  It contains some title rows of text.  Under that it contains some dynamically created Option rows (can be from 1 to 100 rows).  Under that is a footer row with two buttons.</p>
  
  <p>What i'm trying to do is:</p>
  
  <ol>
  <li>Make the title static so it does not scroll.  </li>
  <li>Make button row static so it's always visible at bottom of page</li>
  <li>Make the container with the options have a y scroll, and it's height to always take up whatever remaining space is available (window height - title row's height, minus button rows height)</li>
  </ol>
  
  <p>I am looking for an all css solution (no js/jquery). I only need to support modern browsers (last two versions of ie, chrome, firefox).</p>
  
  <pre><code>&lt;body&gt;
    &lt;div&gt;
      &lt;div class='configuration-drawer-container configuration-drawer-container-open'&gt;
        &lt;div class="configuration-drawer-body"&gt;
          &lt;div class="configuration-drawer-content"&gt;
            &lt;div class="title-row-wrapper"&gt;
              &lt;div class="title"&gt;
                Dashboard Configuration
              &lt;/div&gt;
              &lt;div&gt;
              &lt;p&gt;
                Select the data tiles you want displayed on the PM Dashboard.
              &lt;/p&gt;
              &lt;p&gt;
                &lt;span&gt;Note:&lt;/span&gt;
                Dashboard configurations are shared across all workspaces of the same type.  Changes to the configuration will affect other workspaces.
              &lt;/p&gt;
              &lt;p&gt;
                Select up to five rows
              &lt;/p&gt;
            &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class='data-box-row-wrapper'&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 1
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 2
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 3
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 4
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 5
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 6
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 7
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 8
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 9
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 10
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 11
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 12
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 13
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 14
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 15
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 16
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 17
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 18
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 19
              &lt;/div&gt;
              &lt;div class="configuration-drawer-data-box-row" &gt;
                Option 20
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="button-wrapper"&gt;
              &lt;div class="cancel" &gt;
                Close
              &lt;/div&gt;
              &lt;div class="save"&gt;
                Save
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  
  body {
    background-color: gray;
    height: 100%;
    overflow-y: hidden;
  }
  
  .configuration-drawer-container {
      background-color: #fff;
      bottom: 0;
      color: #333;
      font-size: 15px;
      font-weight: 300;
      height: 100vh;
      padding: 24px 24px 0 24px;
      position: absolute;
      top: 0;
      z-index: 9998;
  }
  
  .configuration-drawer-container-open {
      height: 100vh;
     /*overflow-y: auto;*/
      visibility: visible;
      width: 480px;
      right: 0;
  }
  
  .configuration-drawer-body {
    min-height: 100%;
      position: relative;
  }
  
  .configuration-drawer-content {
      position: relative;
      height: 100%;
  
       heigth: calc(100vh - 500px);
       overflow: auto;
      /* padding-bottom: 90px; */
  }
  
  .title-row-wrapper {
      margin-bottom: 24px;
      position: relative;
      width: 100%;
  }
  
  .title {
      color: #333;
      display: inline;
      font-size: 20px;
      font-weight: 500;
  }
  
  .data-box-row-wrapper {
    overflow-y: auto;
    background-color: light-gray;
    border: 1px red solid;
  }
  
  .configuration-drawer-data-box-row {
      align-items: center;
      border-bottom: 1px solid #eee;
      cursor: pointer;
      display: flex;
      height: 48px;
      text-align: left;
  }
  
  .button-wrapper {
      padding: 24px 0;
  }
  
  .cancel {
      color: #007ec2;
      margin-right: 16px;
      padding: 0 8px 0 8px;
      border: 1px solid black;
      display: inline-block;
      font-size: 14px;
      font-weight: 500;
      height: 36px;
      line-height: 36px;
      min-width: 64px;
      text-align: center;
      vertical-align: middle;
  }
  
  .save {
      color: #007ec2;
      margin-right: 16px;
      padding: 0 8px 0 8px;
      border: 1px solid black;
      display: inline-block;
      font-size: 14px;
      font-weight: 500;
      height: 36px;
      line-height: 36px;
      min-width: 64px;
      text-align: center;
      vertical-align: middle;
  }
  </code></pre>
  
  <p>Here's my codepen:</p>
  
  <p><a href="https://codepen.io/johnsontroye/pen/XVdyGN?editors=1100" rel="nofollow noreferrer">https://codepen.io/johnsontroye/pen/XVdyGN?editors=1100</a></p>