使用高度 100vh/100% 时，移动浏览器页面底部的间隙

Question

我有一个页面，里面有几个div(class="full"(，我希望它与用户的视口一样高。它适用于桌面(Ubuntu，Firefox(，但不适用于移动设备(Android，Chrome(。我的智能手机底部有一个小的白色间隙。

div.full {
    min-height: 100vh !important;
}
html,body {
    min-height: 100vh !important;
    height:100vh;
    margin:0px;
    padding:0px;
}
body {
    position: relative; 
    background: url(../img/background.jpg) no-repeat center center fixed;  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

当我在页面上滚动时，这个差距会增加。好像是我向下滚动时我的安卓状态栏的高度+chrome的地址栏，而当我没有滚动时，它只是状态栏的高度。

我也尝试了 100% 而不是 100vh，但没有帮助。

如果我删除

height:100vh;

从html中，身体块间隙消失了，但是我遇到了一个新问题：背景图像放大了很多并且变得模糊......

如何在所有设备上使div 精确地 100% 高(即使在滚动时(？

Answer 1

我想我现在让它工作了。问题中的代码是正确的，但我的 CSS 中也有这段代码：

.ref-logo {
    width: 400px;       
}

这似乎导致我的页面被重新缩放。我注意到了这一点，因为导航栏按钮仅在我向右滚动时才显示......

这现在有效：

.ref-logo {
    max-width: 400px;
    width: 90%;
}

我知道为什么我不是网络开发人员:P