如何使用JQuery'在y轴上获得溢出；什么是数据表？

您好，我正在为我的项目使用用于JQuery的DataTables。但现在，我被困在如何使它有y轴与滚动溢出

这就是我现在所拥有的，在正常分辨率下似乎还可以

这是我调整表格大小时的结果。这里存在着数据表破坏其他元素的问题

这是我的JS

socket.on("sent_table_client", function (_received_data) {
  received_data_table_client = _received_data;
  $("#table_client_name").DataTable( {
      "paging"   : false,
      "searching": false,
      columns: [
          { data: "name"  , defaultContent: "None"},
          { data: "key_ir", defaultContent: "None"},
          { data: "dt"    , defaultContent: "None"}
      ],
      data: received_data_table_client
  });
});

在此处添加

滚动：“auto”

也不起作用

这是我的HTML

<div style="flex:1;overfow-y:auto;"> <!-- `overfow-y:auto;` does not work. -->
  <table class="display" id="table_client_name" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>IR Key Code</th>
            <th>Latest Data Input</th>
        </tr>
    </thead>
  </table>
</div>

名称
红外密钥码
最新数据输入

---

这个问题的解决方案是什么？

我只是说这很容易，因为我在早期的项目中解决了这个问题：p。当时这并不容易

获取父元素的高度，减去datatables页眉/页脚的高度，并将滚动设置为结果值

function fillContainerHeight(api){
    var $scrollBody = $(api.table().body()).closest('div.dataTables_scrollBody');
    //reset height to calc new height, in case window was resized to be smaller
    $scrollBody.css({maxHeight:1,height:1})
    var container = $(api.table().container()).parent();
    var containerHeight = container.outerHeight(true);
    var headerHeight = $(api.table().header()).closest('div.dataTables_scrollHead').outerHeight(true);
    var footerHeight = $(api.table().footer()).closest('div.dataTables_scrollFoot').outerHeight(true);
    var scrollY = containerHeight - headerHeight - footerHeight;
    $scrollBody.css({maxHeight:scrollY,height:scrollY})
}

---

如果您愿意，可以在调整窗口大小时调用此函数。

我认为

滚动：“auto'

没有任何作用。试着给它一个整数或一个像素高度的字符串，比如

'300px'

，这样它就无法根据包装器自动调整了？我不这么认为。不过，通过javascript自己完成这项工作很容易，不是很容易。我现在正在努力研究如何使工作既

flex:1带
溢出-y：滚动。