Bootstrap模态百分比高度

Question

我用很多模态构建应用程序,我需要为这样的东西设置模态:

.modal {top:5%; 左:5%; 右:5%; 底部:5%; }

因此,浏览器窗口的宽度为90%,高度为90%.但我需要有可滚动的模态体.我使用modal-header,它必须始终可见,因为它包含功能按钮.

当我想定义最大高度时,即使它是百分比,它也不是正确的数字,因为 - 例如,标题的宽度设置为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;} 

这是一个例子

让我知道它是否有效=)