Bootstrap 3 прокручиваемый div для таблицы

Я использую Bootstrap 3 с навигационной панелью вверху и страницей, отображающей таблицу, форматированную с использованием класса таблицы Bootstrap 3. Я бы хотел, чтобы таблица (которая сидит в своем собственном div) была единственной частью прокручиваемой страницы (когда ширина/высота данных в таблице превышает таковую на странице). Я разработал div для таблицы следующим образом:

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

У меня есть сценарий, иллюстрирующий это, и я добавил уродливую красную рамку 5px вокруг div, чтобы выделить область, которую я хотел бы прокрутить:

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

Заметьте, что прокрутка влево-вправо работает отлично - мне не нужно было ничего делать, чтобы заставить это работать, и div автоматически настраивает полосу прокрутки, когда изменяется размер окна. Тем не менее, я не знаю, как настроить высоту div, чтобы вести себя одинаково - я жестко закодировал значение 200px, но на самом деле я хотел бы, чтобы div заполнил "остаток" окна, чтобы при изменении размера браузера он все еще работает.

Как я могу заставить div вести себя одинаково как по горизонтали, так и по вертикали?

Ответ 1

Прокрутка происходит из окна с классом pre-scrollable

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

Там больше примеров: http://getbootstrap.com/css/#code-block
Пожелайте, чтобы это помогло.

Ответ 2

Ну, один из способов сделать это - установить высоту вашего тела на 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/