Why is there an extra space at the bottom for mobile?
Question
I have a website that is responsive for mobile. On most devices it works fine but on the iPhone 11/11 pro the background is visible at the bottom of the page. After doing some research, it seems the CSS height property may be an issue. Suggested to use VH rather than % but after changing the HTML BODY to 100vh, it pushes all the content down (but no longer have the background visible at the bottom). See below - the red is the background color, the brown is the image.
All my content fits within the screen. Also - if I rotate the device in landscape then rotate back, then its perfect!
I think it is related to this 'notch' idea - https://css-tricks.com/the-notch-and-css/
HTML
<body class="bkground">
<div class="main">
<div class="wrapper">
<div class="content" role="main">
<div class="main-form-container">
<form id="auth-form" method="post" class="centered">
<!-- Content here -->
</form>
</div>
<div class="accept-connect-container">
<form method="post" class="accept-form">
<!-- Content here -->
</form>
</div>
</div>
</div>
</div>
CSS
@media (min-height: 640px) and (max-height:699px) {
html body {
height: 100%;
}
.wrapper {
background-image: url('../img/desktop-background.jpg');
background-repeat: no-repeat;
-webkit-background-size: fill;
-moz-background-size: fill;
-o-background-size: fill;
background-size: fill;
background-position: center;
background-color: #fff;
margin: 0;
padding: 0;
}
.main {
height: 100%;
}
.content {
width: 350px;
}
}
EDIT
Works with the following CSS now but not sure if this is an actual fix or not. It may break other devices but according to Chrome responsive tool, it hasn't. Hard to say.
CSS - Changed height from % to VH for the BODY and MAIN tag/class
@media (min-height: 640px) and (max-height:699px) {
html body {
height: 100vh;
}
.wrapper {
background-image: url('../img/desktop-background.jpg');
background-repeat: no-repeat;
-webkit-background-size: fill;
-moz-background-size: fill;
-o-background-size: fill;
background-size: fill;
background-position: center;
background-color: #fff;
margin: 0;
padding: 0;
}
.main {
height: 100vh;
}
.content {
width: 350px;
}
}
1 answers
solution1
0 ACCPTED 2020-09-28 11:16:30
You have fixed the min-height and max-height.
fix them as 100% or 100vh.It will work.
@media (max-height:100%) {
html body {
height: 100vh;
}
.wrapper {
background-image: url('../img/desktop-background.jpg');
background-repeat: no-repeat;
-webkit-background-size: fill;
-moz-background-size: fill;
-o-background-size: fill;
background-size: fill;
background-position: center;
background-color: #fff;
margin: 0;
padding: 0;
}
.main {
height: 100vh;
}
.content {
width: 350px;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.