Question

我有一个模式窗口：JSFiddle。
在移动设备（操作系统：Android / iOS，浏览器：Chrome）上浏览时，当我打开模式并将背景页面滚动到底部时，我遇到下一个问题：top browser toolbar with URL input and tabs button hides时，模式下有一个空白。 br />
屏幕快照上的黑色包装纸由.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。

Answer 1

尝试在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;
}

使用视口的宽度/高度可以确保覆盖蒙版将宽度和高度设置为视口大小的100％。

显示：手机上的桌子-高度问题

1 个答案: