Question

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

.modal {top：5％;左：5％;右：5％;底部：5％; }

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

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

让我知道它是否有效=）

Bootstrap模态百分比高度

1 个答案: