android mobile问题（100vh和位置固定的页脚错误）

Question

Here's link to site.

Site doesn't have scroll (you can move by using arrows), body has overflow:hidden .

Body contains 3 blocks: .main-content , .bottom1 and .footer

.main-content has 100vh .

.bottom1 and .footer have position:fixed both.

.Footer has bottom: 0 , .bottom1 has bottom: 80px .

Desktop works just fine: height is 100vh and other blocks are at the bottom. ios mobile browsers are also fine. But android browsers have huge height (like 3x bigger than expected) and user has to scroll down to see footer . Does anybody know how to fix this issue?

Answer 1

applying position:fixed; to .main-content will fix the issue.

.main-content {
    position: fixed;
    left: 0;
    width: 100%;
    height: 100vh;
}