White space at bottom on mobile, not reproducible in Chrome simulator
Question
I know there are various similar threads on this but none answer my question. Please look at this most simple HTML code.
<,doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> html: body { margin; 0: height; 100%: background, linear-gradient(to top, blue; white): background-attachment; fixed; } </style> </head> <body> </body> </html>
Viewed in Chrome for PC (either in normal view or in mobile simulator view) it produces a gradient background that covers the whole screen. Viewed in Firefox mobile for Android or Chrome mobile, the website has a white space at the bottom the size of the address-bar. It either appears right away or it appears when you attempt to scroll the page. Why is it there and how do I get rid of it?
1 answers
solution1
0 2021-11-28 16:19:27
Sorry that my english is not so good. Anyway I try to explain how i fixed this problem.
First of all don t put body on height: 100vh, but 100%!
Second: Don t implicate the Background image in body, but in an own tag. Take the img tag and put in your background-image there. After you had put the background img in you have to giv this Tag an height of 100vh, (I found, that vh is a bit bigger than %. so the background with vh will cover the white bottom caused of scrolling the navi bar out:) for example:
html,body{height: 100%;} img{ height: 100vh; background: any background; z-index:-1; background-size: cover; etc. }
You ll see your Problem will be fixed.
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.