How to limit the height of the modal?

Question

I'm looking for a way to keep a modal dialog within screen bounds, i.e. that its height is always less than the screen height and the width is adjusted accordingly. I tried:

.modal-dialog {   max-height: 100%; } 

but this doesn't seem to have any effect.

http://jsfiddle.net/ma4zn5gv/

An illustration:

I prefer a pure CSS solution (no js) if it exists. For clarity, I'm looking for max-height, not height (i.e. is the modal is no taller than screen, leave it as is).

Answer 1

Use viewport units with calc. Like this:

.img-responsive {     max-height: calc(100vh - 225px); } 

...where the 225px corresponds to the combined height of the top and bottom sections of the viewport which surround the dialog.

Also, in order to take care of the width of the modal we need to set a few more properties:

.modal {     text-align:center; } .modal-dialog {     display: inline-block;     width: auto; } 

Updated Fiddle (Resize the viewport height to see the effect)

---

Alternatively:

We can replace calc with a padding + negative margin technique like so:

.img-responsive {     max-height: 100vh;     margin: -113px 0;     padding: 113px 0; } 

FIDDLE

PS: browser support for viewport units is very good

Answer 2

Target the modal-body and not the modal-dialog.

Add the following to your CSS:

max-height: 80vh; overflow-y: auto; 

It should look like this:

.modal-body {     max-height: 80vh; overflow-y: auto; } 

Adjust the VH height to preference.