Bootstrap是我们做开发的经常用到的一款前端界面框架，运用他我们可以很快速的给界面进行布局，给元素设置样式。它提供了丰富的CSS样式给我们进行调用，同时它的栅格布局系统也可以让我们快速的对页面进行布局而不必去解决繁琐的浏览器兼容性问题。在Bootstrap中我们经常使用table对记录集进行展示，在应用的时候我们很多时候想让table的高度固定，而不是根据内容这么无限的扩展高度，具体该怎么做那？小编现在与大家分享一下自己的经验。工具/原料morebootstrap.cssSublime Text 3方法/步骤1/8分步阅读

首先说明一下编辑器大家可以根据自己的喜好进行选择，我这里选择的是Sublime Text 3。你用记事本也是可以的。我们先来看一下我们本次的文件结构吧，如下图所示：只有2个文件，一个是bootstrap的样式文件(bootstrap.css)，一个是html文件（用于效果展示）

2/8

下面的话我们就要在我们的html文件中新建一个table了，然后我们给table引入bootstrap的样式类table，table-bordered，table-hover，建好的表格结构如下所示：

3/8

我们下面就往tbody里填充一些数据吧，多填充一些，看看浏览器会有什么反应。我们运行以后发现浏览器右边出现了滚动条，这个应该不难理解吧。数据多了，浏览器会出现向下的滚动条，这是浏览器的特性。

4/8

现在就到了我们的主题了，我们该如何做，才能固定我们table的高度不让他出现滚动条那？这在实际的应用中都是很使用的问题了。

5/8

OK，下面我们来具体解决这个问题，我们首先想到的是给table一个高度，如下图所示，但是，我们运行以后，发现并没有起作用。这是为什么那？因为虽然你给table设置了高度，但是其内部文本的长度远大于高度，并且table所在的容器（浏览器）也是无限大的，所以他并没有作用。

6/8

下面我们想到的就是在table外面在包裹一层div做容器，我们给div设置高度，这样table不管多长只能在div里了。现在我们运行的话看到table的高度已经固定为600像素了，但是你可能会发现右边还是有滚动条，这是因为我们用的overlow:auto的缘故。

7/8

在我们平常的例子中如果不想有滚动条的话，那么唯一的做法就是对数据进行分页，这样每一页出来的数据正好是我们定义的table的高度即可，就向下面这样的格式：

8/8

以上就是小编对bootstrap-table固定高度的分享了，总结就是就table放在div里，给div设置height，并让其overflow为auto，最后在与后台结合进行分页，问题就解决了。

编程语言BOOTSTRAP