移动浏览器页面底部使用高度100vh / 100％

我有一个带有几个div（class =“full”）的页面，我希望它和用户的视口一样高。 它适用于Desktop（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，身体块差距消失，但后来我有一个新的问题：背景图像放大了很多，变得模糊...

我如何在所有设备上精确设置100％的分辨率（即使在滚动时）？

---

我想我现在已经开始工作了。 问题中的代码是正确的，但我在CSS中也有这样的代码：

.ref-logo {
    width: 400px;       
}

这似乎导致我的页面被重新调整。 我注意到这一点，因为只有当我向右滚动时才显示导航栏按钮...

现在这个工作：

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

我知道我为什么不是Web开发人员：P

链接地址: http://www.djcxy.com/p/88225.html

上一篇: Gap on bottom of the page on mobile browsers when using height 100vh/100%

下一篇: Header background video resizes if header height: 100vh