Bootstrap 3可滾動div表

Question

我使用Bootstrap 3，在頂部有一個導航欄和一個顯示使用Bootstrap 3的表類格式化的表的頁面。我希望表（它坐在它自己的div中）是可滾動頁面的唯一部分（當表中數據的寬度/高度超過頁面的寬度/高度時）。我有風格的股利爲表如下：

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

我說明這是一個小提琴，和我說周圍的DIV醜陋5px的紅色邊框突出，我想有滾動區域：

是向左滾動向右

http://jsfiddle.net/4NB2N/4/

通知的偉大工程 - 我沒有做任何事情來得到這個工作，而當調整過窗口的DIV自動調整滾動條。然而，我不知道如何設置div的高度來表現相同的方式 - 我硬編碼的200px值，但我真的希望div來填補窗口的「休息」，以便在瀏覽器調整大小時仍然有效。

我怎樣才能使水平和垂直的行爲相同？

Answer 1

那麼一種方法是將你身體的高度設置爲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 2

滾動來自一個框類pre-scrollable

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

還有更多的例子：http://getbootstrap.com/css/#code-block
希望它幫助。