我有一个模态窗口:JSFiddle .
在移动设备(操作系统:Android/iOS，浏览器:Chrome)上浏览时，当我打开模态并将背景页面滚动到底部时，我遇到了下一个问题:当 top browser toolbar with URL input and tabs button hides ，模态下方有一个空白。
屏幕截图上的黑色 wrapper 由 .modal-mask 制作.
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
而且它不适合整个窗口的高度和宽度。您可以在底部和右侧看到空白区域。所以.modal-mask不涵盖所有 <body> .我怎样才能制作.modal-mask总是全高和全宽？
顺便说一句，在桌面上没有这个问题。
P. S. 我的模式还在页面上居中。
编辑 1:gif.
最佳答案
尝试在 width 和 height 上使用另一个单位。
CSS:
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100vw; /* vw mean viewport width */
height: 100vh; /* vh mean viewport height */
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
使用视口(viewport)宽度/高度可以保证覆盖 mask 将宽度和高度设置为视口(viewport)大小的 100%。
关于html - 显示 : table on mobile - height issue，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52220111/