Динамически увеличивайте и уменьшайте высоту стола

Question

У меня есть диалоговое окно, и его тело разделено на три части
- Название кузова
- Стол
- Нижний колонтитул

В теле у меня есть два div'а. Div1 для заголовка тела и Div2 для таблицы и нижнего колонтитула.

.div2 {
    height: 88%;
}

.table{
    overflow-y: auto;
}

Когда есть только один заголовок тела, он работает нормально, но если есть несколько заголовков тела (несколько строк), то таблица и нижний колонтитул переполняют тело диалога, которое мне не нужно.

Я пробовал различные комбинации свойств flex, но не смог сделать это правильно. (из-за моего ограниченного гибкого знания).

Ожидается: даже если для Body Title имеется несколько строк, Table and Footer не должен переполнять тело диалога и регулировать их высоту в пределах доступного пространства.

Answer 1

Эта большая строка CSS может решить вашу проблему

table, th, td {
  border: 1px solid black;
}
.body-wrapper{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100vh;
}

В соответствии с вашим требованием, я думаю, ваш HTML-код должен быть таким

<div class="body-wrapper">
  <div class="div1">
    <p>This is title</p>
  </div>  
  <div class="div2">
    <table style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
    </table>
    <footer>
      <p>This is footer</p>
    </footer>
  </div>
</div>