表的 Bootstrap 3 可滚动 div答案

【问题标题】：Bootstrap 3 scrollable div for table表的 Bootstrap 3 可滚动 div
【发布时间】：2013-11-07 12:33:22
【问题描述】：

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

【问题讨论】：

你试过最大高度吗？

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

一种方法是将您的身体高度设置为您希望您的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%;
}

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/

【讨论】：

但我不知道正文/页面的高度，用户可以将浏览器窗口调整为他们选择的任何宽度/高度。我真的只是想让占据页面的“其余部分”。
感谢您的帮助！但是，在不知道高度的 200px 值的情况下，有什么方法可以做到这一点？我使用它作为硬编码值来显示我想要实现的目标，但我想要一个更通用的解决方案，所以告诉 DIV 占用可视窗口区域的“其余部分”？当用户调整窗口大小（或使用具有不同分辨率的设备）时，窗口将改变高度/宽度。
@DavidMcClelland 200 值只需要调整包装器的高度，使其不会到达页面底部。它与您的示例无关。如果它到达页面底部，则滚动不再像您希望的那样工作。你在你的页面上试过了吗？我认为它应该在大多数设备上都能正常工作。它可能不适用于手机等非常小的设备。在这种情况下，您可以检查$(window).width() 的小宽度并将其调整得更高。将其更改为 250 而不是 200 等。

【解决方案2】：

滚动来自类pre-scrollable的框

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

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

【讨论】：

这对我有用，例如
即使在固定顶部或固定底部元素中，这也是此类的超级最佳解决方案！

【解决方案3】：

你也可以用

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

对我有用

【讨论】：