Javascript 表的引导3可滚动div

我使用的是Bootstrap3，它的顶部有一个导航栏，还有一个页面显示使用Bootstrap3的table类格式化的表格。我希望表格（位于自己的div中）是页面中唯一可滚动的部分（当表格中数据的宽度/高度超过页面的宽度/高度时）。我为表格设置了div样式，如下所示：

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

我用一把小提琴来说明这一点，并在div周围添加了一个难看的5px红色边框，以突出我希望可以滚动的区域：

请注意，从左向右滚动效果很好-我不必做任何事情来让它工作，当窗口也调整大小时，div会自动调整滚动条。但是，我不知道如何设置div的高度，使其以相同的方式工作-我硬编码了200px值，但我真的希望div填充窗口的“其余部分”，以便在调整浏览器大小时仍能工作

---

如何使div在水平和垂直方向上的行为相同？

一种方法是将您的身体高度设置为您希望的

页面的
高度。在这个例子中，我做了
600px

然后将你的
wrapper
高度设置为我在这里做的
70%
这将调整你的表格，使它不会填满整个屏幕，而只是占据指定页面高度的一个百分比

body {
   padding-top: 70px;
   border:1px solid black;
   height:600px;
}

.mygrid-wrapper-div {
   border: solid red 5px;
   overflow: scroll;
   height: 70%;
}


更新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);
});

滚动来自一个带有类
可预滚动的框

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



还有更多的例子：

希望有帮助。
您也可以使用

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

这对我很有用
但我不知道正文/页面的高度，用户可以将浏览器窗口的大小调整为他们选择的任何宽度/高度。我真的希望它占据页面的“剩余部分”。谢谢你的帮助！但是，在不知道高度的200px值的情况下，有没有办法做到这一点？我用它作为硬编码的值来显示我想要实现的目标，但是我想要一个更通用的解决方案，所以告诉DIV占据可视窗口区域的“剩余”部分？当用户调整窗口大小（或使用不同分辨率的设备）时，窗口的高度/宽度将发生变化。@davidmccleland只需调整包装的高度即可，使其不会到达页面底部。这与你的例子无关。如果到达页面底部，滚动条将不再像您所希望的那样工作。你在你的网页上试过了吗？我认为它应该能在大多数设备上正常工作。。它可能无法在手机等非常小的设备上工作。。在这种情况下，您可以检查
$（window）.width（）
的小宽度，然后将其调高。将其更改为
250
而不是
200
等。您尝试过maxheight吗？这对我很有用，例如，即使在固定顶部或固定底部元素中，这也是该类的超级和最佳解决方案！