it-swarm.com.ru

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 вести себя одинаково как по горизонтали, так и по вертикали?

55
David McClelland

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

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

Есть еще примеры: http://getbootstrap.com/css/#code-block
Хотелось бы, чтобы это помогло.

109
itsnikolay

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

Update Как насчет подхода 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/

24
Trevor

Вы также можете использовать Style = "overflow-y: scroll; height: 150px; width: auto;" Это работает для меня

0
Marinpietri