Bootstrap 3+jQuery DataTables表格铺满屏幕（高度异常）求解

嘿，我来帮你搞定这个表格高度的问题！你遇到的核心问题是HTML元素的百分比高度需要依赖父元素的明确高度，而且DataTables本身的默认行为不会自动让表格占满容器高度，咱们一步步来修复：

为什么你的设置不生效？ #

你给表格加了height="100%"，但它的父元素（container-fluid、body、html）默认都没有设置height: 100%，所以表格的百分比高度找不到参考值，只能跟着内容高度走。另外，DataTables初始化时会生成一些额外的DOM结构（比如表头容器、表格主体容器），直接给<table>加高度也会被这些结构覆盖。

具体解决方案 #

1. 先给根元素设置全高度 #

在页面里添加自定义CSS，让html、body和container-fluid都占满视口高度：

html, body {
  height: 100%;
  margin: 0; /* 去掉默认边距，避免出现不必要的滚动条 */
}
.container-fluid {
  height: 100%;
  padding: 15px; /* 保留Bootstrap的内边距，避免表格贴边 */
  box-sizing: border-box; /* 让内边距算在高度里，不会超出视口 */
}

2. 用DataTables的scrollY配置实现高度铺满 #

修改你的DataTables初始化代码，添加scrollY选项，让表格主体占满剩余高度，同时可以开启垂直滚动（如果内容超出的话）：

$(document).ready(function() {
  $('#example').DataTable({
    scrollY: 'calc(100% - 120px)', /* 减去表头、页脚和容器内边距的总高度，可根据实际调整 */
    scrollCollapse: true, /* 当内容不足时，表格自动收缩到内容高度 */
    paging: false /* 不需要分页的话可以关掉，让表格更贴合高度 */
  });
});

这里的calc(100% - 120px)是灵活的写法，你可以根据自己的布局调整这个数值，比如如果表头+页脚的总高度是80px，就改成calc(100% - 80px)。

3. 优化表格容器（可选） #

如果你用了table-responsive，记得给它也设置高度：

.table-responsive {
  height: 100%;
}

修改后的完整代码示例 #

<head>
  <title>test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" />
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    .container-fluid {
      height: 100%;
      padding: 15px;
      box-sizing: border-box;
    }
    .table-responsive {
      height: 100%;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <div class="table-responsive">
      <table id="example" class="table table-bordered table-hover" cellspacing="0" width="100%">
        <thead>
          <tr class="active">
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Prescott Bartlett</td>
            <td>Technical Author</td>
            <td>London</td>
            <td>27</td>
            <td>2011/05/07</td>
            <td>$145,000</td>
          </tr>
          <tr>
            <td>Gavin Cortez</td>
            <td>Team Leader</td>
            <td>San Francisco</td>
            <td>22</td>
            <td>2008/10/26</td>
            <td>$235,500</td>
          </tr>
          <tr>
            <td>Hope Fuentes</td>
            <td>Secretary</td>
            <td>San Francisco</td>
            <td>41</td>
            <td>2010/02/12</td>
            <td>$109,850</td>
          </tr>
          <tr>
            <td>Vivian Harrell</td>
            <td>Financial Controller</td>
            <td>San Francisco</td>
            <td>62</td>
            <td>2009/02/14</td>
            <td>$452,500</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
  <script>
    $(document).ready(function() {
      $('#example').DataTable({
        scrollY: 'calc(100% - 120px)',
        scrollCollapse: true,
        paging: false
      });
    });
  </script>
</body>
</html>

关键要点总结 #

• 百分比高度必须从根元素（html/body）开始逐层设置，子元素才能继承参考高度。
• DataTables的scrollY是控制表格高度的核心选项，它会自动管理表格的滚动区域和表头固定。
• 用box-sizing: border-box确保内边距不会让容器超出视口高度。

内容的提问来源于stack exchange，提问作者JuniorDev