将表格填充到可用空间，固定页眉和页脚答案

【问题标题】：Fill table to available space, fixing the header and footer将表格填充到可用空间，固定页眉和页脚
【发布时间】：2021-09-24 00:38:34
【问题描述】：

我的部分空间受限于视口的大小（在我的实时页面中）。

布局包括：

表格上方的内容
表格 > 标题 + 正文
内容如下表

现在，表格的溢出部分有太多的项目。我希望它是可滚动的，但我想将 (1) + header 固定在顶部，将 (3) 固定在空间的底部。

基本上，我需要表格主体来填充可用空间，将上面的内容保持在顶部，将下面的内容保持在底部。

我该怎么做？

* {
color: #ffffff
}

section 
{
  height: 200px;
}

section .table-wrapper {
  background-color: #202020;
  padding: 0;
}

section .row {
  margin-left: 0;
  margin-right: 0;
  height: 100%;
}

section .row>* {
  padding-left: 0;
  padding-right: 0;
}


/* Content above table */
.table-header {
  padding: .75rem .5rem;
}

.table-header .btn-container .add-btn {
  border: none;
  outline: none;
  background-color: #002088;
  border-radius: 4px;
  font-size: 14px;
  color: #EEEEEE;
  padding: .55rem .75rem;
}

.table-header .btn-container .add-btn span {
  margin-right: .5rem;
}


/* Table */

table {
  width: 100%;
  height: 100%;
}

table thead {
  background-color: #605079;
  padding: .5rem;
}

// Table header
table thead tr th {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: .65px;
  color: #ffffff;
  line-height: 40px;
  padding: 0 .5rem;
}

table thead th {
  border-bottom: 0px transparent;
}

table tbody tr {
  background-color: #505050;
  border-bottom-width: 1px;
  border-bottom-color: #3b4253;
}

table tbody tr td {
  font-size: 14px;
  color: var(--nav-text);
  font-weight: 400;
  line-height: 35px;
  padding: .5rem .5rem;
}

table tbody tr td:nth-of-type(1),
table thead tr th:nth-of-type(1) {
  padding-left: 30px;
}

select {
  color: #000000;
}

option {
  color: #000000;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<section>
  <div class="row">
    <div class="col-12 table-wrapper">
      <div class="d-flex justify-content-between align-items center table-header">
        <div class="filter-container">
          <label class="mx-2" for="filter">Search</label>
          <input class="mx-2 px-2" type="text" name="filter" placeholder="Search" />
        </div>

        <div class="btn-container px-2">
          <button type="button" class="add-btn">
            <span>Add
          </button>
        </div>
      </div>

      <div>
        <table role="grid">
          <thead>
            <tr role="row">
              <th scope="col">Name</th>
              <th scope="col">Email</th>
              <th scope="col">Card</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
          </tbody>
        </table>

        <div class="d-flex justify-content-between p-2">
          <select class="m-2" style="width: auto" name="pageSize">
            <option value="10">10 items per page</option>
            <option value="20">20 items per page</option>
            <option value="30">30 items per page</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</section>

我能够通过使用 CSS-Grid 并设置正确的大小，将三个部分分成多个元素（页脚与表格一起位于元素内部）来取得进展。我现在只需要修复表头。

section .table-wrapper {
  //...
  display: grid;
  grid-template-rows: fit-content(100%) auto fit-content(100%);
  grid-template-areas: "header" "main" "footer";
}

section .row {
  //...
  flex-wrap: nowrap;
}

* {
color: #ffffff
}

section 
{
  height: 200px;
}

section .table-wrapper {
  background-color: #202020;
  padding: 0;
  display: grid;
  grid-template-rows: fit-content(100%) auto fit-content(100%);
  grid-template-areas: "header" "main" "footer";
}

section .row {
  margin-left: 0;
  margin-right: 0;
  height: 100%;
  flex-wrap: nowrap;
}

section .row>* {
  padding-left: 0;
  padding-right: 0;
}

.scrollable {
  overflow: auto;
}

/* Content above table */
.table-header {
  padding: .75rem .5rem;
}

.table-header .btn-container .add-btn {
  border: none;
  outline: none;
  background-color: #002088;
  border-radius: 4px;
  font-size: 14px;
  color: #EEEEEE;
  padding: .55rem .75rem;
}

.table-header .btn-container .add-btn span {
  margin-right: .5rem;
}


/* Table */

table {
  width: 100%;
}

table thead {
  background-color: #605079;
  padding: .5rem;
}

// Table header
table thead tr th {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: .65px;
  color: #ffffff;
  line-height: 40px;
  padding: 0 .5rem;
}

table thead th {
  border-bottom: 0px transparent;
}

table tbody tr {
  background-color: #505050;
  border-bottom-width: 1px;
  border-bottom-color: #3b4253;
}

table tbody tr td {
  font-size: 14px;
  color: var(--nav-text);
  font-weight: 400;
  line-height: 35px;
  padding: .5rem .5rem;
}

table tbody tr td:nth-of-type(1),
table thead tr th:nth-of-type(1) {
  padding-left: 30px;
}

select {
  color: #000000;
}

option {
  color: #000000;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<section>
  <div class="row">
    <div class="col-12 table-wrapper">
      <div class="d-flex justify-content-between align-items center table-header">
        <div class="filter-container">
          <label class="mx-2" for="filter">Search</label>
          <input class="mx-2 px-2" type="text" name="filter" placeholder="Search" />
        </div>

        <div class="btn-container px-2">
          <button type="button" class="add-btn">
            <span>Add
          </button>
        </div>
      </div>

      <div class="scrollable">
        <table role="grid">
          <thead>
            <tr role="row">
              <th scope="col">Name</th>
              <th scope="col">Email</th>
              <th scope="col">Card</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
            <tr>
              <td>Name</td>
              <td>example@example.com</td>
              <td>Something</td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <div class="d-flex justify-content-between p-2">
        <select class="m-2" style="width: auto" name="pageSize">
          <option value="10">10 items per page</option>
          <option value="20">20 items per page</option>
          <option value="30">30 items per page</option>
        </select>
      </div>
    </div>
  </div>
</section>

【问题讨论】：

所以基本上你想在滚动时修复你的表格标题，并且你希望表格在设置“每页项目”时响应。如果我没有正确理解这一点，请纠正我。
我希望表格项目填满可用空间并可以滚动，并且之前和之后的内容都可以固定到位。就像之前的 div 和要固定到顶部的标题和要固定到底部的 div 一样。

标签： html css

【解决方案1】：

纯 CSS 和 HTML 是不够的。你需要 javascript 来实现你的目标。

更具体地说，您应该使用 Intersection Observer。使用它，您可以根据元素的可见性更改 css 或从元素中添加/删除类。例如，如果用户向下滚动到表格标题不再可见的点，您可以触发操作。或者当表格标题仅在 50% 或更少时可见时。你明白了。

如果您从未使用过 Intersection Observer，那么 youtube 可能是了解其工作原理的良好开端。

另一种选择是手动计算所有内容。这样，您需要定义用户需要滚动多远（多少像素）才能触发操作。代码看起来像这样：

if(window.pageYOffset > 150) {
  //do some css change
}

A very basic example of this approach

【讨论】：