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设置为您希望page的height 。 在这个例子中，我做了600px 。
然后设置你的wrapper高度的身体的百分比，我做了70%这将调整你的表，以便它不填满整个屏幕，而是只占用指定页面高度的百分比。
body { padding-top: 70px; border:1px solid black; height:600px; } .mygrid-wrapper-div { border: solid red 5px; overflow: scroll; height: 70%; }
更新如何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); });
