Javascript full height intro section with auto padding chrome bug，not displayed properly

Question

我試圖用一些基本的javascript標記實現全高介紹部分。

詳細說明：
我得到了一個父DIV元素，它充當包裝並且適應完整的視區高度。由於某些移動設備的不兼容性，css「height：100vh」不起作用。所以我堅持這個代碼。它在一段時間以前很完美。我沒有改變任何東西，突然它在一夜之間停止在鉻合金工作？！高度計算不正確。

我附上你我的代碼和案例截圖。

我確定你可以幫助我。
預先感謝您
Working sample
Chrome bug

$(document).ready(function(){ 

'use strict'; 

setInterval(function() { 

    var windowHeight = $(window).height(); 

    var containerHeight = $("#intro-wrapper > .inner").height(); 

    var navHeight = $("header#main").outerHeight(true); 

    var border = 20; 

    var padTop = windowHeight - 20 - (containerHeight+navHeight); 

    $("#intro-wrapper > .inner").css ({ 

     'padding-top': Math.round(padTop/2) + 'px', 
     'padding-bottom': ((padTop/2)- border) + 'px', 
     'margin-bottom': border + 'px' 
    }); 

}, 0); 
}); 

Answer 1

嘗試height:100vh;在CSS的最大高度。