显示：移动表 - 高度问题

问题描述 投票：0回答：1

我有一个模态窗口：JSFiddle。 在浏览移动设备（操作系统：Android / iOS，浏览器：Chrome）时，当我打开模态并滚动背景页面到底部时，我有下一个问题：当top browser toolbar with URL input and tabs button hides时，模态下有一个空白区域。 enter image description here 截图上的黑色包装是由.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。 enter image description here

html css
1个回答
2
投票

尝试在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％。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.