我有一个包含几个 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% 高(即使在滚动时)?
最佳答案
我想我现在可以正常工作了。问题中的代码是正确的,但我的 CSS 中也有这段代码:
.ref-logo {
width: 400px;
}
这似乎导致我的页面重新缩放。我注意到这一点是因为导航栏按钮仅在我向右滚动时显示...
这现在有效:
.ref-logo {
max-width: 400px;
width: 90%;
}
我知道为什么我不是 Web 开发人员 :P
关于android - 使用高度 100vh/100% 时移动浏览器页面底部的间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48433654/