柔性容器，内有桌子

Question

我有一个容器网格，里面有3个div flex子元素，第一个在页眉（固定），第二个是正文，第三个是页脚（固定）。第一个是头部（固定），第二个是主体，第三个是页脚（固定）。在主体中我有一个表格。我希望当我调整窗口大小时，"body "部分内的表格能通过应用tbody的溢出-y保持在该部分内，这样表格就不会 "拉伸 "它所在的部分。有什么想法吗？

在第一张图中，我把表格放在黄色体内部，tbody.height=600px。黄色主体是660px。如果我调整窗口的大小，情况就像第二张图一样。因为表格的高度超过了黄色的高度，所以在窗口中出现了滚动条。在这种情况下，页脚（橙色）会消失。当我调整窗口大小时，我希望窗口的滚动条不出现，而是减少表格的高度，这样只有表格滚动条出现，如第三张图。

Answer 1

最好是看到一个例子。

但现在我可以建议这样做。

1. 头部元素有 positon: fixed 和 top: 0，就像你说的那样。
2. 中间元素有 padding-top: 100px (与Header的高度相同)和 padding-bottom: 100px (与Footer的高度相同)。
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>