title: Add scrollbar to bootstrap modal body
body: <p>I'm trying to add scrollbar to bootstrap modal body. But it add to entire content.How to add it to only to body.was using modals which had long content, and the modals automatically scrolled when a given max height was reached.</p>
  
  <p>This is my code</p>
  
  <pre><code>&lt;head&gt;
  &lt;!-- Bootstrap CSS--&gt;
  &lt;link href="/&lt;s:text name="app.name"/&gt;/css/bootstrap.min.css" rel="stylesheet" type="text/css"&gt;
  
  .modal-body {
  max-height: calc(100vh - 212px);
  overflow-y: auto;
  }
  &lt;/head&gt;
  
  
  &lt;body&gt;
  &lt;div&gt;
  &lt;s:if test="user.level == 0 &amp;&amp; name != ''"&gt;
  &lt;button id="roleBtn" class="btn btn-info" type="button" onclick=""
  data-toggle="modal" data-target="#roleModal"&gt;
  &lt;s:text name="roles"/&gt;
  &lt;/button&gt;
  &lt;/s:if&gt;
  &lt;/div&gt;
  
  &lt;div class="modal" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
  &lt;div class="modal-dialog" style="overflow-y: scroll; max-height:80%;  margin-top: 60px; margin-bottom:30px;"&gt;
  &lt;div class="modal-content"&gt;
  &lt;div class="modal-header"&gt;
  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
  &lt;/button&gt;
  &lt;h4 class="modal-title" id="myModalLabel"&gt;&lt;s:text name="headingRoles"/&gt;&lt;/h4&gt;
  &lt;/div&gt;
  
  &lt;s:form theme="simple" method="post" action="UserSupport"&gt;
  &lt;div class="modal-body"&gt;
  &lt;div class="container-fluid"&gt;
  &lt;s:hidden name="docType" value="userLevel"/&gt;
  &lt;div&gt;
  &lt;s:hidden name="name"/&gt;
  &lt;s:iterator value="userRoles" status="rowstatus"&gt;
  &lt;s:hidden name="userRoles[%{#rowstatus.index}].role" value="%{role}"/&gt;
  &lt;div class="form-group col-xs-12"&gt;
  &lt;div class="col-xs-4"&gt;&lt;/div&gt;
  
  &lt;div class="col-xs-8" align="left"&gt;
  &lt;div class="checkbox"&gt;
  &lt;label&gt;&lt;/label&gt;&lt;s:checkbox name="userRoles[%{#rowstatus.index}].selected"
  value="name != ''"/&gt; &lt;s:property
  value="roleName"/&gt;&lt;/label&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/s:iterator&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="modal-footer"&gt;
  &lt;div class="panel-body" align="center"&gt;
  &lt;s:submit method="saveRoles" cssClass="btn btn-primary"
  value="%{getText('save')}"&gt;&lt;/s:submit&gt;
  &lt;button type="button" method="resetRoles" class="btn btn-default" data-dismiss="modal"&gt;
  &lt;s:text name="close"/&gt;
  &lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/s:form&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>it doesn't work as expected. The modal window does reach a maximum size, but it just cuts its content there and the footer is not even displayed.Answers are welcome</p>
  
  <p>Thank you  </p>