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/

Answer 3

您也可以使用 style =“ overflow-y：滚动；高度：150px；宽度：自动；”对我有用

表格的Bootstrap 3可滚动div

3 个答案: