Gap on bottom of the page on mobile browsers when using height 100vh/100%
I have a page with a few divs (class="full") that I want to be as high as the viewport of the user is. It works on Desktop (Ubuntu, Firefox) but not on mobile (Android, Chrome). My smartphone shows a small white gap at the bottom.
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;
}
When I scroll on the page, this gap increases. It seems like it is the height of my android status bar + the address bar of chrome when I scrolled down and just the height of the status bar when I did not scroll.
I also tried 100% instead of 100vh, it didn't help.
If I remove
height:100vh;
from the html, body block the gap disappears, but then I have a new problem: The background image is scaled up a lot and gets blurred...
How can I make a div exactly 100% high on all devices (even when scrolling)?
I think I got it working now. The code in the question was correct, but I also had this code in my CSS:
.ref-logo {
width: 400px;
}
This seems to have caused my page to be rescaled. I noticed this because the navbar-button was only shown when I scrolled to the right...
This works now:
.ref-logo {
max-width: 400px;
width: 90%;
}
I know why I am no web developer :P
链接地址: http://www.djcxy.com/p/88226.html上一篇: 填充剩余的垂直空间