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

Question

我有一个包含几个 div (class="full") 的页面，我希望它们与用户的视口(viewport)一样高。它适用于桌面(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% 高(即使在滚动时)？

Answer 1

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

.ref-logo {
    width: 400px;       
}

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

这现在有效:

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

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