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

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;
}