Bootstrap 3可滚动div表

Question

我使用Bootstrap 3，在顶部有一个导航栏和一个显示使用Bootstrap 3的表类格式化的表的页面。我希望表（它坐在它自己的div中）是可滚动页面的唯一部分（当表中数据的宽度/高度超过页面的宽度/高度时）。我有风格的股利为表如下：

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

我说明这是一个小提琴，和我说周围的DIV丑陋5px的红色边框突出，我想有滚动区域：

是向左滚动向右

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

通知的伟大工程 - 我没有做任何事情来得到这个工作，而当调整过窗口的DIV自动调整滚动条。然而，我不知道如何设置div的高度来表现相同的方式 - 我硬编码的200px值，但我真的希望div来填补窗口的“休息”，以便在浏览器调整大小时仍然有效。

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

Answer 1

那么一种方法是将你身体的高度设置为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/

Answer 2

滚动来自一个框类pre-scrollable

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

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