jQuery 表格的 Bootstrap 3 可滚动 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19639842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 scrollable div for table
提问by David McClelland
I am using Bootstrap 3 with a navbar at the top and a page that displays a table formatted using Bootstrap 3's table class. I would like the table (which is sitting in its own div) to be the only part of the page that is scrollable (when the width/height of the data in the table exceeds that of the page). I have styled the div for the table as follows:
我正在使用 Bootstrap 3，顶部有一个导航栏，一个页面显示使用 Bootstrap 3 的表格类格式化的表格。我希望表格（位于其自己的 div 中）成为页面中唯一可滚动的部分（当表格中数据的宽度/高度超过页面的宽度/高度时）。我已将表格的 div 样式设置如下：
.mygrid-wrapper-div {
overflow: scroll;
height: 200px;
}
I have a fiddle illustrating this, and I added an ugly 5px red border around the div to highlight the area that I would like to have scrollable:
我有一个小提琴来说明这一点，我在 div 周围添加了一个丑陋的 5px 红色边框以突出显示我想要滚动的区域：
Notice that scrolling left-to-right works great - I didn't have to do anything to get this to work, and the div adjusts the scrollbar automatically when the window is resized too. However, I don't know how to setup the div's height to behave the same way - I hardcoded the 200px value but really I would like the div to fill the "rest" of the window so that when the browser is resized it still works.
请注意，从左到右滚动效果很好——我不需要做任何事情来让它工作，当窗口调整大小时，div 也会自动调整滚动条。但是，我不知道如何设置 div 的高度以使其具有相同的行为 - 我对 200px 值进行了硬编码，但我真的希望 div 填充窗口的“其余部分”，以便在调整浏览器大小时它仍然可以工作.
How can I make the div behave the same both horizontally and vertically?
如何使 div 在水平和垂直方向上的行为相同？
回答by itsnikolay
A scrolling comes from a box with class pre-scrollable
滚动来自带有类的框 pre-scrollable
<div class="pre-scrollable"></div>
There's more examples: http://getbootstrap.com/css/#code-block
Wish it helps.
还有更多示例：http: //getbootstrap.com/css/#code-block
希望它有所帮助。
回答by Trevor
Well one way to do it is set the height of your body to the heightthat you want your pageto be. In this example I did 600px.
一种方法是将您的身体高度设置为height您想要的高度page。在这个例子中，我做了600px。
Then set your wrapperheight to a percentage of the body here I did 70%This will adjust your table so that it does not fill up the whole screen but in stead just takes up a percentage of the specified page height.
然后将你的wrapper高度设置为身体的百分比，我做了70%这将调整你的表格，使其不会填满整个屏幕，而是只占据指定页面高度的百分比。
body {
padding-top: 70px;
border:1px solid black;
height:600px;
}
.mygrid-wrapper-div {
border: solid red 5px;
overflow: scroll;
height: 70%;
}
UpdateHow about a jQuery approach.
更新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);
});
回答by Marinpietri
You can use too
你也可以使用
style="overflow-y: scroll; height:150px; width: auto;"
It's works for me
它对我有用
