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

发布时间：2020-12-17 21:27:40 所属栏目：安全来源：网络整理

导读：我用很多模态构建应用程序,我需要为这样的东西设置模态： .modal { top: 5%; left: 5%; right: 5%; bottom: 5%; } 因此,浏览器窗口的宽度为90％,高度为90％.但我需要有可滚动的模态体.我使用modal-header,它必须始终可见,因为它包含功能按钮. 当我想定义最大

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

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

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

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

因为我找不到任何解决方案,所以我开始考虑长滚动模态,尽管滚动长模态滚动标题.

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

解决方法

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

让我知道它是否有效=)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!