Bootstrap 3可滚动div表格

我在顶部使用了一个导航栏的Bootstrap 3,并使用Bootstrap 3的表格类来显示一个表格。 我希望表(它坐在自己的div)是可滚动页面的唯一部分(当表中的数据的宽度/高度超过页面的宽度/高度时)。 我已经为表格设置了div,如下所示:

.mygrid-wrapper-div { overflow: scroll; height: 200px; } 

我有一个小提琴来说明这一点,我在div周围添加了一个丑陋的5px红色边框来突出显示我想要滚动的区域:

http://jsfiddle.net/4NB2N/4/

请注意,从左向右滚动效果很好 – 我不必做任何事情就可以实现这个function,当窗口resize时,div自动调整滚动条。 然而,我不知道如何设置div的高度行为相同的方式 – 我硬编码的200px值,但我真的希望div来填补窗口的“rest”,所以当浏览器resize,它仍然工作。

我怎样才能使水平和垂直的行为相同?

滚动来自带有pre-scrollable类的框

 <div class="pre-scrollable"></div> 

还有更多的例子: http : //getbootstrap.com/css/#code-block
希望它有帮助。

那么做一个方法是将身体的height设置为您希望pageheight 。 在这个例子中,我做了600px

然后设置你的wrapper高度的身体的百分比,我做了70%这将调整你的表,以便它不填满整个屏幕,而是只占用指定页面高度的百分比。

 body { padding-top: 70px; border:1px solid black; height:600px; } .mygrid-wrapper-div { border: solid red 5px; overflow: scroll; height: 70%; } 

http://jsfiddle.net/4NB2N/7/

更新如何jQuery的方法。

 $(function() { var window_height = $(window).height(), content_height = window_height - 200; $('.mygrid-wrapper-div').height(content_height); }); $( window ).resize(function() { var window_height = $(window).height(), content_height = window_height - 200; $('.mygrid-wrapper-div').height(content_height); }); 

http://jsfiddle.net/4NB2N/11/