修复了页面溢出时覆盖移动设备上整个视口的元素

Question

我想在移动设备上显示覆盖整个视口的固定元素(chrome，webView(。CSS非常简单：

.full {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}

在桌面上，这有效。但是当我在移动浏览器(或 chrome 中的移动模式下(打开它时，如果底层页面溢出，它不会覆盖整个页面。这是jsfiddle(http://jsfiddle.net/ympasezw/12/(，这里是独立页面(https://ghost.sk/overflow/(。在chrome中打开它，按Ctrl + Shift + I然后打开移动模式(开发人员工具中的Ctrl + Shift + M(，它将覆盖页面的1/4，当我平移页面时，它不会停留在视口中。

我无法"修复页面以免溢出"，因为这是任何站点上的插件，我无法更改每个站点。基本上我的插件需要向用户显示一些信息，但是如果页面过度并且用户向下和向右滚动，并且当用户激活我的插件时，尽管已修复，但它仍显示在完全在视口之外的某个地方，用户看不到任何东西。

Answer 1

这确实是table在移动屏幕上无响应的问题。但是，您可以通过指定right和bottom属性来获得所需的效果。

.full {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
/* height: 100vh; */
border: 1cm solid #f00;
box-sizing: border-box;
background-color: #00070080;
}