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

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 但这使我根本无法滚动。看起来高度必须是特定值。

使用 vh 比使用 px 好很多，但底栏并不总是出现在底部。

Answer 1

您可以使用 ViewHeight 和 ViewPort 单位指定元素相对于视口(viewport)元素的宽度和高度，其中 100vw 是所有视口(viewport)的宽度。与 Viewheight 相同，100vh 是所有视口(viewport)的高度。

这是 Units 的 mdn 引用 https://developer.mozilla.org/en-US/docs/Web/CSS/length

.results{
  height:100vh;
}

编辑

vw 和 vh 的一个非常普遍的问题是，它们没有考虑填充和边距等问题。您必须使用 calc()

手动减去这些值

假设所有单元格间距、边距和填充的总和为 20px

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

是的，calc 适用于所有单位。