我的网站上有一个模式弹出框,位于<body>标签内.
这是弹出窗口的样式:
.modalbox {
text-shadow: none;
position: absolute;
padding: 22px;
left: 50%;
background: white;
z-index: 90;
border-radius: 6px;
display: none;
font-size: 14px;
width: 80%;
}
设置宽度很简单.然而,垂直内容是动态的,其中我的问题在于 - 我不希望盒子比浏览器窗口高.
我已经尝试过设置max-width: 90%;,如果body页面的长度不比浏览器窗口长,则可以正常工作.
但是,当body溢出(和滚动条出现)时,90%上面的最大高度是相对于body窗口的高度而不是窗口的高度.这意味着模式框可以垂直超出窗口,迫使用户滚动页面以查看其完整内容.
我想要实现的是,最大高度为浏览器窗口的 90%,以便整个模态框始终可见.
我将处理溢出,我只需要帮助弄清楚如何以上述方式限制垂直尺寸.
Mic*_*mid 66
使用视口百分比长度.
视口百分比长度相对于初始包含块的大小.当初始包含块的高度或宽度改变时,它们相应地缩放.
.modalbox {
max-height: 90vh; }
据我所知，没有办法用 html 或 css 来做到这一点，你必须使用 JQuery 来完成这个：
// Returns height of browser viewport
$( window ).height();
然后使用 90% 的高度值。