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

【问题标题】：Gap on bottom of the page on mobile browsers when using height 100vh/100%使用高度 100vh/100% 时移动浏览器页面底部的间隙
【发布时间】：2018-07-04 03:47:23
【问题描述】：

我有一个包含几个 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;
}

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

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

如果我删除

height:100vh;

从html中，body block的间隙消失了，但是我又遇到了一个新问题：背景图片放大了很多，变得模糊了……

我怎样才能使所有设备上的 div 准确 100% 高（即使在滚动时）？

【问题讨论】：

标签： android html css

【解决方案1】：

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

.ref-logo {
    width: 400px;       
}

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

现在可以了：

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

我知道为什么我不是网络开发者：P

【讨论】：