表格的Bootstrap 3可滚动div

Question

我正在使用Bootstrap 3,顶部有一个导航栏,另一个页面显示使用Bootstrap 3的表类格式化的表格.我希望表(它位于自己的div中)是可滚动页面的唯一部分(当表中数据的宽度/高度超过页面的宽度/高度时).我为表格设置了div的样式如下:

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

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

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

请注意,从左到右滚动效果很好 - 我没有做任何事情来使其工作,并且div也会在调整窗口大小时自动调整滚动条.但是,我不知道如何设置div的高度以相同的方式行事 - 我硬编码了200px的值,但我真的希望div填充窗口的"休息",这样当浏览器调整大小时它仍然有效.

如何使div在水平和垂直方向上表现相同？

Answer 1

滚动来自一个带有课程的盒子 pre-scrollable

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

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

Answer 2

那么一种方法是将你的身体高度设置为height你想要的高度page.在这个例子中,我做到了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/