Блог

У меня есть диалоговое окно, и его тело разделено на три части
— Заголовок тела
— Таблица
— Нижний колонтитул

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

 .div2 {
    height: 88%;
}

.table{
    overflow-y: auto;
}
 

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

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

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

Эта большая строка 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>