Гибкий контейнер со столом внутри

Question

У меня есть контейнерная сетка с 3 субэлементами div flex. Первый в заголовке (фиксированный), второй - в теле, а третий - в нижнем колонтитуле (фиксированный). В теле у меня стол. Я хочу sh, что, когда я изменяю размер окна, таблица внутри раздела «body» останется внутри раздела, применяя overflow-y для tbody, чтобы таблица никогда не «растягивала» раздел, в котором она рассматривается. Некоторые идеи?

На первом изображении у меня есть таблица внутри желтого тела с tbody.height = 600px. Желтое тело - 660 пикселей. Если я изменю размер окна, ситуация будет как второе изображение. Полоса прокрутки появляется в окне, потому что высота таблицы превышает высоту желтого цвета. В этом состоянии нижний колонтитул (оранжевый) исчезнет. Когда я изменяю размер окна, я бы хотел, чтобы полоса прокрутки окна не отображалась, но вместо этого высота таблицы уменьшается, так что отображается только полоса прокрутки таблицы, как на третьем изображении.

Answer 1

Лучше посмотреть на пример.

Но пока я могу предложить следующее:

1. Элемент заголовка имеет positon: fixed и top: 0, как вы сказали.
2. Средний элемент имеет padding-top: 100px (такой же, как высота заголовка) и padding-bottom: 100px (такой же, как высота нижнего колонтитула).
3. Элемент нижнего колонтитула имеет positon: fixed и bottom: 0, как вы сказали .

И вы будете использовать body стандартную прокрутку в этом случае.

Пожалуйста, добавьте живой пример, чтобы я мог ответить более точно. Вы можете использовать https://jsfiddle.net/

ОБНОВЛЕНО

Как я и предложил - вот пример с прокруткой только body

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  z-index: 2;
  background: #1c679a;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  z-index: 2;
  background: #1c9a25;
}

.container {
  position: relative;
  z-index: 1;
  padding-top: 50px; /* same as .header height */
  padding-bottom: 50px; /* same as .footer height */
}

.table {
  width: 100%;
  border: 0;
}

.table thead th {
  position: sticky;
  top: 50px; /* same as .header height */
  background: #ccc;
  border: 0;
}

<div class="header"></div>
<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>title</th>
        <th>title</th>
        <th>title</th>
        <th>title</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>last</td>
        <td>last</td>
        <td>last</td>
        <td>last</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="footer"></div>