Comment mettre la barre de défilement uniquement pour le corps modal?

J'ai l'élément suivant:

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 50px; margin-bottom:50px;" > 
        <div class="modal-content"> 
            <div class="modal-header"> 
                <h3 class="modal-title"></h3> 
            </div> 
            <div class="modal-body"></div> 
            <div class="modal-footer"></div> 
        </div> 
    </div> 
</div> 

Il montre un dialogue modal quelque chose comme ça, en gros, il met la barre de défilement tout autour modal-dialoget non pas modal-bodyqui contient le contenu que j'essaie d'afficher.

L'image ressemble à ceci:

Comment obtenir une barre de défilement modal-bodyuniquement?

J'ai essayé attribuer style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"à modal-bodymais cela n'a pas fonctionné.

Vous devez régler le heightde l' .modal-bodyentrée et le donner overflow-y: auto. Réinitialisez également la valeur de .modal-dialogdépassement sur initial.

Voir l'exemple de travail:

http://www.bootply.com/T0yF2ZNTUd

.modal{
    display: block !important; /* I added this to see the modal, you don't need this */
}

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 250px;
    overflow-y: auto;
}

Si vous ne supportez que IE 9 ou supérieur, vous pouvez utiliser ce CSS qui s'adapte facilement à la taille de la fenêtre. Vous devrez peut-être modifier le "200px" cependant, en fonction de la hauteur de votre en-tête ou pied de page.

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

Problème résolu avec la solution combinée @carlos calla et @jonathan marston.

    /* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

Pour les versions Bootstrap> = 4.3

Bootstrap 4.3 a ajouté une nouvelle fonction de défilement intégrée aux modaux. Cela fait uniquement défiler le contenu du corps modal si la taille du contenu ferait autrement défiler la page. Pour l'utiliser, ajoutez simplement la classe modal-dialog-scrollable au même div qui a la classe modal-dialog .

Voici un exemple:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

En plus de la bonne réponse de Carlos Calla .

La hauteur de .modal-body doit être définie, MAIS vous pouvez utiliser des requêtes multimédias pour vous assurer qu'il convient à la taille de l'écran.

.modal-body{
    height: 250px;
    overflow-y: auto;
}

@media (min-height: 500px) {
    .modal-body { height: 400px; }
}

@media (min-height: 800px) {
    .modal-body { height: 600px; }
}

Facultatif : si vous ne voulez pas que le modal dépasse la hauteur de la fenêtre et utilise une barre de défilement dans le corps .modal, vous pouvez utiliser cette solution réactive. Voir une démo fonctionnelle ici: http://codepen.io/dimbslmh/full/mKfCc/

function setModalMaxHeight(element) {
  this.$element     = $(element);
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() > 767 ? 60 : 20;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });

  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});

Je sais que c'est un vieux sujet, mais cela peut aider quelqu'un d'autre.

J'ai pu faire défiler le corps en fixant la position de l'élément de dialogue modal. Et comme je ne saurais jamais la hauteur exacte de la fenêtre du navigateur, j'ai pris les informations dont j'étais sûr, la hauteur de l'en-tête et du pied de page. J'ai ensuite pu faire correspondre les marges supérieure et inférieure de l'élément modal-body à ces hauteurs. Cela a alors produit le résultat que je recherchais. J'ai jeté un violon pour montrer mon travail.

aussi, si vous voulez une boîte de dialogue plein écran, annulez simplement la largeur: auto; dans la section .modal-dialog.full-screen.

https://jsfiddle.net/lot224/znrktLej/

Et voici le css que j'ai utilisé pour modifier la boîte de dialogue de bootstrap.

.modal-dialog.full-screen {
    position:fixed;
    //width:auto;  // uncomment to make the width based on the left/right attributes.
    margin:auto;                        
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
}

.modal-dialog.full-screen .modal-content {
      position:absolute;
      left:10px;
      right:10px;
      top:10px;
      bottom:10px;
}

.modal-dialog.full-screen .modal-content .modal-header {
        height:55px;  // adjust as needed.
}

.modal-dialog.full-screen .modal-content .modal-body {
        overflow-y: auto;
          position: absolute;
          top: 0;
          bottom: 0;
        left:0;
        right:0;
          margin-top: 55px; // .modal-header height
          margin-bottom: 80px;  // .modal-footer height
}

.modal-dialog.full-screen .modal-content .modal-footer {
        height:80px;  // adjust as needed.
        position:absolute;
        bottom:0;
        left:0;
        right:0;
}

Ou plus simplement, vous pouvez mettre entre vos balises d'abord, puis dans la classe css.

<div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div>

#scroll-wrap {
    max-height: 50vh;
    overflow-y: auto;
}

Utilisation max-heightavec vhcomme unité sur le modal-bodyou un div d'emballage à l'intérieur du modal-body. Cela redimensionnera modal-bodyautomatiquement la hauteur ou le div d'habillage (dans cet exemple) lorsqu'un utilisateur redimensionnera la fenêtre.

vh est l'unité de longueur représentant 1% de la taille de la fenêtre pour la hauteur de la fenêtre.

Tableau de compatibilité du navigateur pour l' vhunité.

Exemple: https://jsfiddle.net/q3xwr53f/

Ce qui a fonctionné pour moi, c'est de régler la hauteur à 100%, le dépassement automatique en espérant que cela aidera

   <div style="height: 100%;overflow-y: auto;"> Some text o othre div scroll </div>

Une solution js simple pour définir la hauteur modale proportionnelle à la hauteur du corps:

$(document).ready(function () {
    $('head').append('<style type="text/css">.modal .modal-body {max-height: ' + ($('body').height() * .8) + 'px;overflow-y: auto;}.modal-open .modal{overflow-y: hidden !important;}</style>');
});

la hauteur du corps doit être de 100%:

html, body {
    height: 100%;
    min-height: 100%;
}

Je règle la hauteur modale du corps à 80% du corps, cela peut bien sûr être personnalisé.

J'espère que ça aide.

Dans la dernière version de bootstrap, il existe une classe pour rendre le corps modal défilable.

.modal-dialog-scrollable vers .modal-dialog .

Lien modal Bootstrap pour le contenu défilable du corps modal

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>