下面的方法对我很有效:

html { height: 100vh; }

body {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
}

/* this is the container you want to take the visible viewport  */
/* make sure this is top-level in body */
#your-app-container {
  height: 100%;
}

body将采用可见视口高度，而#your-app-container with height: 100%将使容器采用可见视口高度。

body {
   width: 100%;
   height: 100%
}

100%会根据屏幕大小自行调整但出于某种原因 100vh在屏幕变化时调整有问题，所以如果你使用100vh或100%，使用底部0将受到影响

例如，当搜索栏在视图中或不在移动中，100%与变化，其中100vh将粘在屏幕高度的第一个值

@nils解释得很清楚。

接下来呢?

我只是回到使用相对'经典' %(百分比)在CSS。

实现一些东西通常比使用vh更费力，但至少，你有一个相当稳定的解决方案，它可以跨不同的设备和浏览器工作，没有奇怪的UI故障。

问题:

if ( refDOM.clientHeight != window.innerHeight )

解决方案:

refDOM.style.setProperty('--MYvh', window.innerHeight + 'px' ) ;

完成:

const mobileShit = function ( refDOM ) {
    console.log ( `refDOM.clientHeight : ${refDOM.clientHeight}` ) ;
    console.log ( `window.innerHeight : ${window.innerHeight}` ) ;
    if ( refDOM.clientHeight != window.innerHeight ) { // accounting for mobile
        refDOM.style.setProperty('--MYvh', window.innerHeight + 'px' ) ;
    }
} ;

CSS(通过脚本修改，是的，当任何事情发生变化时，你必须处理事件):

:root {
    --MYvh : 100vh ;
}

因为我是新人，我不能对其他答案发表评论。

如果有人正在寻找一个答案，使这个工作(可以使用javascript -似乎需要使这个工作的时刻)，这种方法对我来说非常有效，它也说明了移动方向的变化。我使用Jquery的示例代码，但应该是可行的与vanillaJS。

-首先，我使用一个脚本来检测设备是触摸还是悬停。的例子:

if ("ontouchstart" in document.documentElement) {
    document.body.classList.add('touch-device');

} else {
    document.body.classList.add('hover-device');
}

这将根据稍后用于高度脚本的设备类型(悬停或触摸)向body元素添加类。

-接下来使用这段代码来设置设备在负载和方向变化时的高度:

if (jQuery('body').hasClass("touch-device")) {
//Loading height on touch-device
    function calcFullHeight() {
        jQuery('.hero-section').css("height", $(window).height());
    }

    (function($) {
        calcFullHeight();

        jQuery(window).on('orientationchange', function() {
            // 500ms timeout for getting the correct height after orientation change
            setTimeout(function() {
                calcFullHeight();
            }, 500);

        });
    })(jQuery);

} else {
    jQuery('.hero-section').css("height", "100vh");


}

-Timeout设置，以便设备在方向改变时正确计算新的高度。如果没有超时，根据我的经验，高度是不正确的。500毫秒可能有点过分，但对我来说很有效。

如果浏览器覆盖CSS的100vh，则-100vh在hover-devices上是一个备用选项。

您可以通过添加以下脚本和样式来做到这一点

function appHeight() {
  const doc = document.documentElement
  doc.style.setProperty('--vh', (window.innerHeight*.01) + 'px');
}

window.addEventListener('resize', appHeight);
appHeight();

风格

.module {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}