html - 当屏幕尺寸缩小时，弹出模式的顶部会截断屏幕

Question

当屏幕缩小时，我的模式的顶部被截断(它在书签和地址栏下消失)。我已经尝试了 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%);
}

非常感谢任何帮助。

问候，迈克

Answer 1

听起来你的内容对于窗口来说太大了？如果是这样，则设置 max-height: 100vh; 模态框不会超出窗口的高度，而您上面的代码应该继续将其居中。