Исправлен элемент, покрывающий весь видовой экран на мобильном телефоне при переполнении страницы

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