html - 如何在底部显示滚动条并将表格高度设为自动？

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，则水平滚动条位于最底部，并且不会显示在页面顶部，并且垂直滚动条不再可滚动。

标签： htmlcssangulardatatablesangular-datatables

Answer 1

尝试在您的body和html标签中提供 100% 的高度：

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

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

看看 https://jsfiddle.net/oyzsvbw4/1/