twitter-bootstrap - Bootstrap 模态百分比高度

Question

我用很多模态构建应用程序，我需要为类似的东西设置模态:

.modal { top: 5%; left: 5%; right: 5%; bottom: 5%; }

因此它将位于浏览器窗口的 90% 宽度和 90% 高度上。但我需要有可滚动的模态体。我使用模态标题，它必须始终可见，因为它包含功能按钮。

当我想定义最大高度时，即使它是百分比，它也不是正确的数字，因为例如，标题的宽度设置为 5% ，但填充为 5px 并将底部边框定义为 1px 所以我可以不要把这些都算在一起。为了定义溢出，我必须定义最大宽度或宽度，但无法动态知道它，并且百分比不适合。

因为我找不到任何解决方案，所以我开始考虑长可滚动模态，尽管在长模态中滚动滚动出标题。

有什么办法可以得到我想要的东西吗？

Answer 1

你可以尝试这个CSS:

.modal{
  width: 90%; /* desired relative width */
  min-height:80%;
  left: 5%; /* (100%-width)/2 */
  margin: auto auto auto auto; /* place center */}

.modal-body{overflow-y:scroll;max-height:none;position:absolute;top:50px;bottom:50px;right:0px;left:0px;}

.modal-footer {position: absolute;bottom: 0;right: 0;left: 0;} 

Here is an example

让我知道它是否有效 =)