Bootstrap 3 - set height of modal window according to screen size

Question

I am trying to create a kind of responsive megamenu using Bootstrap 3 modal dialog. I would like to set the width and height of the whole modal window to 80% of the viewport, while setting the modal-body to a max-height in order not to populate the whole screen on large viewports.

My HTML:

    <div class="modal fade">             <div class="modal-dialog modal-megamenu">                 <div class="modal-content">                     <div class="modal-header">                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>                         <h4 class="modal-title">Modal Mega Menu Test</h4>                     </div>                     <div class="modal-body">                         <div class="row">                             <div class="col-md-3"></div>                             <div class="col-md-3"></div>                             <div class="col-md-3"></div>                             <div class="col-md-3"></div>                         </div>                     </div>                 </div>                     <div class="modal-footer">                         <button type="button" data-dismiss="modal" class="btn btn-primary">close</button>                     </div>              </div>         </div> 

My CSS:

.modal-megamenu {     width:80%;     height:80%; }  .modal-body {     max-height:500px;     overflow:auto; } 

This works as intended for the width, but the "height" parameter doesn't give any result. Like that, the height of the modal window is always set to the max-height value. Does anybody have an idea of how to set the height dynamically according to the viewport height?

Answer 1

Pure CSS solution, using calc

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

200px may be adjusted in accordance to height of header & footer