Question

我有一个带有几个div的页面（class =＆＃34; full＆＃34;）我希望它与用户的视口一样高。它适用于桌面（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状态栏的高度+铬的地址栏，当我没有滚动时，它只是状态栏的高度。

我也试过100％而不是100vh，它没有帮助。

如果我删除

height:100vh;

从html，body block中间隙消失了，但后来我又遇到了一个新问题：背景图像被大量放大并变得模糊......

如何在所有设备上将div精确地设为100％（即使在滚动时）？

Answer 1

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

.ref-logo {
    width: 400px;       
}

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

现在可以使用：

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

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

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

1 个答案: