Wie platziere ich eine Bildlaufleiste nur für den Modalkörper?

Ich habe folgendes Element:

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

Es zeigt einen modalen Dialog wie diesen. Im Grunde genommen wird die Bildlaufleiste um den gesamten Bereich herum platziert modal-dialogund nicht modal-bodyder Inhalt, den ich anzeigen möchte .

Das Bild sieht ungefähr so ​​aus:

Wie bekomme ich nur eine Bildlaufleiste modal-body?

Ich habe versucht, zuzuweisen style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;", modal-bodyaber es hat nicht funktioniert.

Sie haben das einstellen heightvon der .modal-bodyin und geben Sie es overflow-y: auto. Setzen Sie auch den .modal-dialogÜberlaufwert auf zurück initial.

Siehe das Arbeitsprobe:

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;
}

Wenn Sie nur IE 9 oder höher unterstützen, können Sie dieses CSS verwenden, das problemlos auf die Größe des Fensters skaliert werden kann. Abhängig von der Höhe Ihrer Kopf- oder Fußzeile müssen Sie möglicherweise die "200px" anpassen.

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

Problem mit Mähdrescherlösung @carlos calla und @jonathan marston gelöst.

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

Für Bootstrap-Versionen> = 4.3

Bootstrap 4.3 hat Modals eine neue integrierte Bildlauffunktion hinzugefügt. Dadurch wird nur der Modal-Body- Inhalt gescrollt, wenn die Größe des Inhalts andernfalls die Seite scrollen würde. Um es zu verwenden, fügen Sie einfach die Klasse Modal-Dialog-Scrollable zu demselben Div hinzu, das die Modal-Dialog- Klasse hat.

Hier ist ein Beispiel:

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

Hinzu kommt die großartige Antwort von Carlos Calla .

Die Höhe von .modal-body muss festgelegt werden, ABER Sie können Medienabfragen verwenden, um sicherzustellen, dass sie für die Bildschirmgröße geeignet sind.

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

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

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

Optional : Wenn Sie nicht möchten, dass das Modal die Fensterhöhe überschreitet und eine Bildlaufleiste im .modal-Body verwendet, können Sie diese reaktionsfähige Lösung verwenden. Eine funktionierende Demo finden Sie hier: 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'));
  }
});

Ich weiß, dass dies ein altes Thema ist, aber dies kann jemand anderem helfen.

Ich konnte den Körper scrollen lassen, indem ich die Position des Modal-Dialog-Elements festlegte. Und da ich nie die genaue Höhe des Browserfensters erfahren würde, nahm ich die Informationen, bei denen ich mir sicher war, die Höhe der Kopf- und Fußzeile. Ich konnte dann die oberen und unteren Ränder des Modalkörperelements an diese Höhen anpassen. Dies führte dann zu dem Ergebnis, das ich suchte. Ich warf eine Geige zusammen, um meine Arbeit zu zeigen.

Wenn Sie einen Vollbilddialog wünschen, deaktivieren Sie einfach die Breite: auto; im Abschnitt .modal-dialog.full-screen.

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

Und hier ist das CSS, mit dem ich den Bootstrap-Dialog geändert habe.

.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;
}

Oder einfacher, Sie können zuerst zwischen Ihre Tags und dann in die CSS-Klasse setzen.

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

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

Verwenden Sie max-heightmit vhals Einheit auf dem modal-bodyoder einem Wrapper Div innerhalb des modal-body. Dadurch wird die Höhe von geändertmodal-body oder das Wrapping-Div (in diesem Beispiel) automatisch geändert, wenn ein Benutzer die Größe des Fensters ändert.

vh ist die Längeneinheit, die 1% der Ansichtsfenstergröße für die Ansichtsfensterhöhe darstellt.

Browserkompatibilitätstabelle fürvh Gerät.

Beispiel: https://jsfiddle.net/q3xwr53f/

Was für mich funktioniert hat, ist die Einstellung der Höhe auf 100%, wenn der Überlauf automatisch aktiviert ist. Ich hoffe, dies wird helfen

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

Eine einfache js-Lösung, um die modale Höhe proportional zur Körpergröße einzustellen:

$(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>');
});

Körpergröße muss 100% betragen:

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

Ich habe die modale Körpergröße auf 80% des Körpers eingestellt, dies kann natürlich angepasst werden.

Ich hoffe es hilft.

In der neuesten Bootstrap-Version gibt es eine Klasse, die den modalen Körper scrollbar macht.

.modal-dialog-scrollbar zu .modal-dialog .

Modaler Bootstrap-Link für scrollbaren Inhalt des Modalkörpers

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