Html 显示：移动设备上的表格-高度问题

我有一个模式窗口：。
在手机上浏览（操作系统：Android/iOS，浏览器：Chrome）时，当我打开模式并将背景页面滚动到底部时，我遇到了下一个问题：当打开时，模式下有一个空白。

屏幕截图上的黑色包装由

.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

不能覆盖所有的

。如何使

.modal mask

始终为全高全宽？
顺便说一下，桌面上没有这样的问题

顺便说一下，我的模式是集中在页面上

编辑1:gif。

---

尝试在

宽度和
高度上使用另一个装置

CSS:

若要使用视口宽度/高度，可以保证覆盖遮罩将宽度和高度设置为视口大小的100%。
尝试在
宽度
和
高度
上使用另一个单位

CSS:

使用“视口宽度/高度”可以保证覆盖遮罩将宽度和高度设置为视口大小的100%。
对不起，暂时没有帮助我。在移动设备和桌面上都尝试过（但使用设备工具栏）。您需要隐藏设备工具栏吗？当设备工具栏被隐藏时（由于向下滚动），我需要具有
。模式掩码
全高和全宽。我不知道您的
主体
css设置是什么，但我的建议是将位置设置为100vw和vh的车身相对位置。然后
.modal mask
删除
显示：表格
。在我的项目中，它为我工作。100vw/100vh是很多！考虑到计算视口高度/宽度：
（所需大小*100）/视口基准=vw中的大小
。这意味着您的屏幕是1000px宽的，您希望您的内容是20px宽的：
（20*100）/1000=2vw
。对不起，暂时没有帮助我。在移动设备和桌面上都尝试过（但使用设备工具栏）。您需要隐藏设备工具栏吗？当设备工具栏被隐藏时（由于向下滚动），我需要具有
。模式掩码
全高和全宽。我不知道您的
主体
css设置是什么，但我的建议是将位置设置为100vw和vh的车身相对位置。然后
.modal mask
删除
显示：表格
。在我的项目中，它为我工作。100vw/100vh是很多！考虑到计算视口高度/宽度：
（所需大小*100）/视口基准=vw中的大小
。这意味着您的屏幕是1000px宽的，您希望您的内容是20px宽的：
（20*100）/1000=2vw
。
.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;
}