移动浏览器和100％x 100％固定元素

Question

我的网页出现问题。我有父母

body {
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0 10px;
}

然后我有一个固定元素：

.full-screen-content.is-visible {
    min-height: 100%;
    height: 100%;
    width: 100vw;
    position: fixed;
    overflow: visible;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999999999;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    transform: translate3d(0px, 0px, 0px);
}

在固定元素的内部，我有一个100％x 100％的绝对元素。

问题是，当我在移动浏览器上观看我的弹出窗口并且URL栏被删除时，一切正常，当我在弹出窗口的底部并向下拖动时，URL栏隐藏并弹出不是100％高度而是100％ - URL栏高度。当我从屏幕上扯下手指然后弹出窗口是100％的视口。

我试图通过连续代码在JS中自动设置高度：

$(document).ready(function() {
    if($(window).width() < mobileBreak) {
        var documentHeight = $(window).innerHeight();
        $('#js-works-container').css('height',documentHeight);
        $('#js-scroll-wrap').scroll(function() {
            var documentHeight = $(window).innerHeight();
            $('#js-works-container').css('height',documentHeight);
        });
    }
});

以下是移动设备的截图：

我还想知道为什么设置为top: 20px并且静态大小的“关闭”按钮始终距离页面顶部20px并且即使URL栏显示也能正确缩放。请帮助我们，因为我不知道该怎么做。

Here's a link to the page

Answer 1

$(window).on('scroll resize', function() {
    checkPopupHeight();
});

function checkPopupHeight() {
  var documentHeight = $(window).height();
  var popupHeight = $('#js-works-container').height();
  if(documentHeight !== popupHeight) {
    $('#js-works-container').css('height',documentHeight);
  }
}