Bootstrap Modal Body Scroll Only

A full height modal dialog, with only the modal-body element scrolling.

by lot224

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--// A Basic HTML Page, just standard html elements and innerText values //-->
<div>
  <div>
    <h3>Example: Scrolling the body section of a modal dialog only.</h3>
  </div>
  <div>
     <button class="btn btn-primary" data-toggle="modal" data-target="#dialog-example">
      Show Modal Dialog
     </button>
  </div>
</div>

<div id="dialog-example" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="label-dialog-example" style="display: none;">
  <div class="modal-dialog full-screen" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="label-dialog-example">Modal Title Area</h4>
      </div>
      <div class="modal-body">
        
<p>Lorem ipsum dolor sit amet, cu modo unum laudem nam, novum conclusionemque cu vim. Id nec cibo liber. Ius fugit atomorum cu. Id assum nihil quo, no sea utroque facilisi posidonium. Essent inermis te duo.</p>

<p>Ad meis audire has. Pri movet debitis offendit ea. Ad fuisset dignissim duo. Postea torquatos duo ex, ne elit definitionem qui. Cum sapientem interesset definitionem id, eligendi adversarium mei ei. Duo at elitr quaeque, eam illum nihil id.</p>

<p>Ea usu admodum intellegam, et has delectus detraxit theophrastus. Invidunt suavitate te has, nonumes efficiendi ne pro, te quo omittam verterem gubergren. Vitae molestiae vim ea, justo graeco torquatos et vix. Solet ubique mediocritatem pri no, te nam senserit tractatos. Ne tota inani molestiae qui, ad eos zril...

SCSS

body {
  // Set the padding of the results window to 10px.
  padding: 10px;
}

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