如何使Bootstrap jQuery数据表响应和增加/减少滚动条高度根据页面的大小

How to make Bootstrap jQuery datatable responsive and increase/decrease the scrollbar height according to the page size?

本文关键字：高度 滚动条 jQuery Bootstrap 何使 数据表 响应 增加      更新时间：2023-09-26

我想让我的web应用程序响应使用Bootstrap 2.1.1(不能切换到最新的Bootstrap由于客户端限制)。

我也使用jQuery数据表1.9.2 Bootstrap。

为此，我使用了Bootstrap的流体组件(container-fluid, row-fluid)，但是我发现它根据页面大小/屏幕分辨率动态调整宽度，但高度保持不变，不使用屏幕的全高度。

所以我找到了一个使用resize事件和动态设置高度的解决方案。

$( window ).resize(function() {
   $('#abonnement_Scroll').css('height',($(window).height()-($(window).height()/100*51)))
}

虽然这是工作的，但只有在某些分辨率。在高度小于1000px的屏幕分辨率下，高度不会进一步降低，并且数据表下方的页脚无法适应屏幕。

和我也发现，jQuery数据表的sScrollY属性不采取值在%，因此不能使其直接响应。

试试这个:

当你调整窗口大小时，它会自动提供滚动条

<div style="overflow:auto;max-width:500px;max-height:300px">
  <table class="table table-striped table-bordered table-hover">
    ...
  </table>
</div>

相关文章：