如何在底部显示滚动条并使表格高度为自动？

Question

我已经在笔记本电脑上编写了如下预期能正常工作的CSS。但是，当使用更大的显示器时，表末尾会出现空白。

  .wrapper{
    width:auto;
    height: 500px;
    overflow-x: scroll;
    overflow-y: scroll;
  }

当我使用overflow :auto;时，垂直滚动条被完全移除，要看到水平滚动条，我必须一直向下滚动

html如下：

  <div class="wrapper">
    <table id="myTable" datatable="ng" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" dt-instance="dtInstance" class="table table-striped table-bordered display nowrap
    table-sm row-border hover" width="100%">
      <thead>
      <tr>
        <th style="min-width: 120px">hostName</th>
        ...
      </tr>
      </thead>
      <tbody>
      <tr style="text-align: left; word-break: break-all;">
        <td>value</td>
        ...
      </tr>
      </tbody>
    </table>
  </div>

如果我设置为height: auto，则水平滚动条位于最底部，而页面顶部未显示，并且垂直滚动条不再可滚动。

Answer 1

而不是使用“ px”，尝试使用相对单位作为表格高度，例如“ vh”或“％”

Answer 2

尝试提供100％的身高和html：

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.wrapper{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  overflow-y: scroll;
}

https://jsfiddle.net/od51eqkh/3/