I am facing an issue with my webpage where I want certain divs (with the class "full") to be as tall as the viewport height of the user. This setup works perfectly on desktop browsers like Ubuntu in Firefox, but I encounter a problem on mobile devices such as Android in Chrome. There is a small white gap visible at the bottom of the screen when viewed on my smartphone.
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;
}
As I scroll down the page, this gap seems to increase. It appears to be a combination of the height of the android status bar and the address bar of Chrome. When not scrolling, it only reflects the height of the status bar.
Switching to using 100% instead of 100vh did not resolve the issue for me.
Removing the line height:100vh; from the html, body block does eliminate the gap, but introduces a new problem: The background image becomes heavily blurred due to excessive scaling...
Is there a way to ensure that a div remains exactly 100% high across all devices, even when users are scrolling?