67

我正在使用 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 在水平和垂直方向上表现相同？

4

3 回答 3

127

滚动来自带有类的框pre-scrollable

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

还有更多示例：http
://getbootstrap.com/css/#code-block 希望对您有所帮助。

于 2014-09-03T17:29:53.567 回答
25

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

于 2013-10-28T19:01:24.267 回答
2

你也可以用

style="overflow-y: scroll; height:150px; width: auto;"

这对我有用

于 2018-09-05T02:39:43.293 回答