如何限制模态的高度? [英] How to limit the height of the modal?

问题描述

我正在寻找一种在屏幕范围内保持模式对话框的方法，即其高度始终小于屏幕高度，并相应地调整宽度.我试过了:

  .modal-dialog {最大高度:100％；} 

但这似乎没有任何作用.

，并带有 calc .像这样:

  .img响应{最大高度:calc(100vh-225px);} 

...其中225像素对应于围绕对话框的视口顶部和底部的组合高度.

此外，为了照顾模态的宽度，我们需要设置更多属性:

  .modal {text-align:center;}.modal-dialog {显示:inline-block;宽度:自动;} 

更新了小提琴(调整视口高度以查看效果)

---

或者:

我们可以将 calc 替换为padding + negative margin技术，例如:

  .img响应{最大高度:100vh;边距:-113px 0;填充:113px 0;} 

字段

PS:浏览器对视口单位的支持为非常好

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).

解决方案

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

这篇关于如何限制模态的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！