web-dev-qa-db-fra.com

Bootstrap 3 div scrollable pour la table

J'utilise Bootstrap 3 avec une barre de navigation en haut et une page qui affiche un tableau mis en forme à l'aide de la classe de tableau de Bootstrap 3. Je voudrais que la table (qui se trouve dans son propre div) soit la seule partie de la page qui peut défiler (lorsque la largeur/hauteur des données dans la table dépasse celle de la page). J'ai stylé la div pour la table comme suit:

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

J'ai un violon illustrant ceci, et j'ai ajouté une bordure rouge moche de 5 pixels autour de la div pour mettre en évidence la zone dans laquelle j'aimerais pouvoir faire défiler:

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

Notez que le défilement de gauche à droite fonctionne très bien - je n’ai rien à faire pour que cela fonctionne, et la div ajuste automatiquement la barre de défilement lorsque la fenêtre est redimensionnée. Cependant, je ne sais pas comment configurer la hauteur de la div pour qu'elle se comporte de la même manière - j'ai codé en dur la valeur 200px mais j'aimerais vraiment que la div remplisse le "reste" de la fenêtre pour que, quand le navigateur est redimensionné, cela fonctionne toujours .

Comment puis-je faire en sorte que la div se comporte de manière identique horizontalement et verticalement?

javascriptjquerycsstwitter-bootstrap
55
David McClelland

Un défilement vient d'une boîte avec la classe pre-scrollable

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

Il y a d'autres exemples: http://getbootstrap.com/css/#code-block
Souhaite que ça aide.

109
itsnikolay

Une façon de le faire est de régler la hauteur de votre corps sur la height que vous voulez que votre page soit. Dans cet exemple, j'ai 600px.

Ensuite, définissez votre hauteur wrapper sur un pourcentage du corps que j’ai créé ici 70%. Cela ajustera votre tableau afin qu’il ne remplisse pas tout l’écran mais prenne seulement un pourcentage de la hauteur de page spécifiée. 

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/

Mise à jour Que diriez-vous d'une approche 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

Vous pouvez aussi utiliser Style = "overflow-y: scroll; height: 150px; width: auto;" Ça marche pour moi

0
Marinpietri