Bootstrap 3 div cuộn cho bảng

Question

Tôi đang sử dụng Bootstrap 3 với thanh điều hướng ở trên cùng và trang hiển thị bảng được định dạng bằng cách sử dụng lớp bảng Bootstrap 3. Tôi muốn bảng (được đặt trong div riêng của nó) là phần duy nhất của trang có thể cuộn được (khi chiều rộng/chiều cao của dữ liệu trong bảng vượt quá mức của trang). Tôi đã theo kiểu div cho bảng như sau:

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

Tôi có một fiddle minh họa này, và tôi đã thêm một đường viền màu đỏ 5px xấu xí quanh div để làm nổi bật các khu vực mà tôi muốn có cuộn:

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

Lưu ý rằng việc cuộn từ trái sang phải hoạt động tốt - Tôi không phải làm gì để thao tác này hoạt động và div cũng điều chỉnh tự động khi cửa sổ được đổi kích thước. Tuy nhiên, tôi không biết cách thiết lập chiều cao của div để hoạt động theo cùng một cách - tôi đã mã hóa giá trị 200px nhưng thực sự tôi muốn div điền vào phần "còn lại" của cửa sổ để khi trình duyệt được thay đổi kích thước, nó vẫn hoạt động .

Làm cách nào để làm cho div hoạt động giống nhau cả theo chiều ngang và chiều dọc?

Answer 1

Một cách để làm là đặt chiều cao của cơ thể thành height mà bạn muốn page của mình. Trong ví dụ này tôi đã làm 600px.

Sau đó đặt chiều cao wrapper của bạn thành phần trăm phần thân ở đây tôi đã làm 70% Điều này sẽ điều chỉnh bảng của bạn để không lấp đầy toàn bộ màn hình nhưng thay vào đó chỉ chiếm một phần trăm chiều cao trang được chỉ định.

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/

Cập nhật Làm thế nào về một cách tiếp cận 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

Một di chuyển đến từ một hộp với lớp pre-scrollable

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

Có nhiều ví dụ: http://getbootstrap.com/css/#code-block
Chúc nó giúp.