表格的 Bootstrap 3 可滾動 div

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

一種方法是將您的身體高度設置為您希望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/

Answer 3

你也可以使用

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

它對我有用