wake-up-neo.com

Bootstrap 3 scrollbare div für Tabelle

Ich verwende Bootstrap 3 mit einer Navigationsleiste oben und einer Seite, auf der eine Tabelle angezeigt wird, die mit der Table-Klasse von Bootstrap 3 formatiert ist. Ich möchte, dass die Tabelle (die in einem eigenen div sitzt) der einzige Teil der Seite ist, der scrollbar ist (wenn die Breite/Höhe der Daten in der Tabelle die der Seite überschreitet). Ich habe das div für die Tabelle wie folgt gestaltet:

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

Ich habe eine Geige, die das illustriert, und ich habe einen hässlichen 5px-roten Rand um das div eingefügt, um den Bereich hervorzuheben, in dem ich scrollen möchte:

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

Beachten Sie, dass das Scrollen von links nach rechts großartig ist - ich musste nichts tun, um dies zu erreichen, und das div passt die Bildlaufleiste automatisch an, wenn auch die Fenstergröße geändert wird. Ich weiß jedoch nicht, wie ich die Höhe des div so einstellen soll, dass sie sich genauso verhält - ich habe den 200px-Wert hart codiert, aber wirklich möchte ich, dass das div den "Rest" des Fensters ausfüllt, so dass der Browser bei einer Änderung der Größe immer noch funktioniert .

Wie kann ich das div horizontal und vertikal gleich benehmen?

55

Ein Bildlauf erfolgt aus einer Box mit der Klasse pre-scrollable

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

Es gibt weitere Beispiele: http://getbootstrap.com/css/#code-block
Ich wünschte, es hilft.

109
itsnikolay

Eine Möglichkeit, dies zu tun, besteht darin, die Höhe Ihres Körpers auf die height einzustellen, die Ihre page sein soll. In diesem Beispiel habe ich 600px gemacht.

Stellen Sie dann Ihre wrapper-Höhe auf einen Prozentsatz des Körpers ein. Ich habe 70% vorgenommen. Dadurch wird Ihre Tabelle so angepasst, dass sie nicht den gesamten Bildschirm ausfüllt, sondern stattdessen nur einen Prozentsatz der angegebenen Seitenhöhe beansprucht. 

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 Wie wäre es mit einem jQuery-Ansatz?.

$(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

Sie können auch Style = "overflow-y: scroll; height: 150px; width: auto;" Es funktioniert für mich

0
Marinpietri