如何将表格高度设置为屏幕大小？

Question

我正在HTML和CSS中创建一个表格，并且它具有自己的滚动条（而不是页面的滚动条）。

<div class = "results">
  <table>
    <thead>
      <tr>
        <th>Header</th>
        <th>Header2</th>
        <th>Header3</th>
        <th>Header4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value3</td>
        <td>Value4</td>
      </tr>
    </tbody>
  </table>
</div>

body {
  overflow: hidden;
}

.results {
  overflow: auto;
  height: 600px;
}

这样做可以实现我的要求，但仅限于我的屏幕。如果我在其他屏幕或分辨率上查看此表，则底部滚动条位于不同位置。如何确保底部滚动条始终在屏幕底部？ 我尝试使用百分比来做到这一点，但底部栏根本不显示。我还尝试使用vh而不是px，但效果相同。我似乎无法弄清楚如何确保底部滚动条始终位于屏幕底部。似乎我必须显式设置高度，以便表格具有自己的滚动条。

我还尝试将高度设置为auto，但这样会导致我无法滚动。看起来高度必须是一个具体值。

与使用px相比，使用vh要好得多，但底部栏仍不总是出现在底部。

- Josh Susa

---

你尝试过使用position fixed吗？ - Aalexander

我认为vh是您正在寻找的单位。 - Daniel

我的问题有点小错误。我确实是指vh，它与px完全相同（位置根据屏幕大小而异）。 - Josh Susa

我也尝试了position fixed，但滚动条根本不出现。 - Josh Susa

似乎表格上方有内容，这就是为什么使用CSS很难处理的原因。还有许多不同的显示纵横比。此外，浏览器可以调整为任何大小（宽度和高度）。我认为这必须用JavaScript来完成。 - bron

Answer 1

你可以使用ViewHeight和ViewPort单位来指定元素的宽度和高度，相对于视口的宽度和高度，其中100vw是视口的全部宽度。同样，使用ViewHeight，100vh是视口的全部高度。

这里是Units的MDN参考链接：https://developer.mozilla.org/en-US/docs/Web/CSS/length

.results{
  height:100vh;
}

编辑

vw和vh很常见的一个问题是它们不考虑padding和margin等因素。你需要使用calc()手动减去这些值。

假设所有cellspacing、margin和padding的总和为20px。

.results{
    height: calc(100vh - 20px);
}

是的，计算器可以使用所有单位。

- Sadra M.

---

很难确定是否有效，因为底部滚动条在屏幕外。我尝试将分辨率设置为不同的值，滚动条仍然在屏幕外（所以可能有效），但是即使我尝试填充，也无法让滚动条再次出现。问题在于实际代码中，表格不占据屏幕的100%。 - Josh Susa

哇，这个完美地运行了。每个人都认为这很复杂，但其实只需要这样就可以了。现在它已经完美地粘在屏幕底部。 - Josh Susa

Answer 2

如果是关于底部的水平滚动条，您可以使用以下CSS。这里我使用了flexbox而不是旧的tablebox，以获得更多的灵活性。

.results {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
.results * {
  box-sizing: border-box;
  margin: 0;
}
.results table {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  border-collapse: collapse;
  background-color: transparent;
}
.results thead, .results tbody {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  position: relative;
}
.results tr {
  display: flex;
  flex-wrap: nowrap;
  position: relative;
}
.results th, .results td {
  display: block;
  width: 100%;
  flex: 0 0 25%;  /* column width */
  max-width: 25%; /* column width */
  white-space: normal;
  text-align: center;
}
/* below for smartphone */
@media (max-width: 767.9px) {
  .results table {
    border: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}

<div class = "results">
  <table>
    <thead>
      <tr>
        <th>Header</th>
        <th>Header2</th>
        <th>Header3</th>
        <th>Header4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value3</td>
        <td>Value4</td>
      </tr>
    </tbody>
  </table>
</div>

如果每列具有不同的宽度大小，则可以使用nth-child。 在您的html中，您可以像这样使用nth-child（1）... nth-child（4）

.results tr th:nth-child(1),
.results tr td:nth-child(1) {
  flex: 0 0 30%;
  max-width: 30%;
}

- bron

---

滚动条仍然没有显示出来。问题在于表格非常固执，除非你明确设置高度，否则滚动条不会显示出来。你正在设置很多宽度，但需要设置高度（除非我可以将所有内容都更改为高度）。目前，使用vh似乎是最好的选择，因为滚动条似乎可以随着屏幕移动，但并不完全准确。 - Josh Susa

抱歉，在您的问题中提到了底部滚动条。在所有设备上都不使用底部滚动条是一个好习惯。如果您确实需要垂直滚动条，则可以使用 overflow-y: visible;（其他属性为 overflow-x 和 overflow）。如果您想在表格本身上使用水平滚动条，则可以使用 .results table { overflow-x: auto; }。 - bron

我实际上不想让底部滚动条成为页面的一部分，而是成为实际表格的一部分。这样我就可以水平滚动而不会滚动整个页面。奇怪的是，垂直滚动条工作正常，但如果我调整窗口大小，则底部水平滚动条的位置会改变。似乎它正在尝试使用vh来纠正位置，但它仍然没有粘在屏幕底部（也就是表格底部）。 - Josh Susa

也许最好的方法是调整断点，使表格内容与浏览器视图重叠 @media (max-width: 767.9px) { .... }。例如，在991.9px处进行更改。然后，如果视图小于内容，则上面的CSS将在表格上包括水平滚动条。 - bron