Set Bootstrap modal content to scroll if height exceeds browser

Question

I have seen so many people asking about this, but no real solid reliable answer.

If the height of the modal exceeds the browser's inner height, I want the red-bordered Div to have a scroll bar to keep the modal within the browser view.

#scrollbox {
  border: 1px solid red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<input type="button" data-toggle="modal" data-target="#myModal" value="Launch Modal">

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        Hello, below is some text in a div that should start scrolling if the height of the modal exceeds the browser.
        
        <p><div id="scrollbox">
          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>
    </div>
  </div>
</div>

Answer 1

For Bootstrap versions >= 4.3

Bootstrap 4.3 added new scroll feature to modals. This makes only the modal-body content scroll if the size of the content would make the page scroll. This might not work for the OP's situation since they have other content in the modal-body, but it might be helpful to someone else. To use it, just add the class modal-dialog-scrollable to the same div that has the modal-dialog class.

Here is an example:

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

For Bootstrap versions < 4.3 (old answer)

You can do this using overflow-y:auto and vh units. Set the max-height property of your scrollbox to 100vh (full viewport height) and subtract some arbitrary number of pixels to account for everything outside the scrollbox (that you want to keep inside the viewport). Then add the overflow-y:auto rule so that if the content exceeds the max-height, a scrollbar will appear. This is pretty similar to this answer except using CSS instead of jQuery.

#scrollbox {
border: 1px solid red;
overflow-y: auto;
max-height: calc(100vh - 150px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<input type="button" data-toggle="modal" data-target="#myModal" value="Launch Modal">

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        Hello, below is some text in a div that should start scrolling if the height of the modal exceeds the browser.
        
        <p><div id="scrollbox">
          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>
    </div>
  </div>
</div>

Answer 2

You can use jquery to asign a max-height in base to the height of the window, i use this code for that situations:

Jquery:

<script>
$(function() {
    // Get the height of the window
    var height = $(window).height();
    $('#scrollbox').css('max-height', height+'px');
});
</script>

if you want, you can subtract pixels to the height of the window, for example i want to subtract 100px to the height of the window:

var height = ($(window).height() - 100);

Css:

#scrollbox{
    overflow-y: auto;
}

i hope will be helpful.

Regards!