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

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

1 个答案: