4

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

.modal {顶部：5%；左：5%；对：5%；底部：5%；}

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

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

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

有什么方法可以得到我想要的吗？

4

1 回答 1

5

你可以试试这个 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;}

这是一个例子

让我知道它是否有效=)

于 2013-03-22T20:46:04.223 回答