移動瀏覽器和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％×100％爲好。

問題是，當我在移動瀏覽器上觀看我的彈出窗口並且URL欄被放下時，一切正常，當我位於彈出框的底部並拖動時，URL欄隱藏並且彈出窗口不是100 ％高度但100％ - 網址欄高度。當我從屏幕上脫下手指時，彈出窗口就是視口的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); 
    } 
}