当屏幕尺寸减小时，弹出模式的顶部部分会切断屏幕

Posted 2021-04-16

当屏幕缩小时，我的模态的顶部会被切断屏幕（它会在书签和地址栏下消失）。我在this link尝试了解决方案（将顶部和底部设置为0）但不适合我。

我的css如下：

/* Modal Content/Box */
.modal-content {
padding: 20px;
border: 1px solid #888;
width: 50%;
position: absolute;
z-index: 9999;
top: 50%;
left: 50%;
width: 50%;
padding: 0px 20px 15px;
background: #fff;
-webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}

任何帮助将非常感谢。

问候，迈克

答案

听起来你的内容对于窗户来说太大了？如果这是正确的，那么设置max-height: 100vh;并且模态不会超出窗口的高度，而上面的代码应该继续居中。