title: Bootstrap 3 - set height of modal window according to screen size
body: <p>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. </p>
  
  <p>My HTML:</p>
  
  <pre><code>    &lt;div class="modal fade"&gt;
              &lt;div class="modal-dialog modal-megamenu"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;x&lt;/button&gt;
                          &lt;h4 class="modal-title"&gt;Modal Mega Menu Test&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-3"&gt;&lt;/div&gt;
                              &lt;div class="col-md-3"&gt;&lt;/div&gt;
                              &lt;div class="col-md-3"&gt;&lt;/div&gt;
                              &lt;div class="col-md-3"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                      &lt;div class="modal-footer"&gt;
                          &lt;button type="button" data-dismiss="modal" class="btn btn-primary"&gt;close&lt;/button&gt;
                      &lt;/div&gt;
               &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.modal-megamenu {
      width:80%;
      height:80%;
  }
  
  .modal-body {
      max-height:500px;
      overflow:auto;
  }
  </code></pre>
  
  <p>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?</p>