如何让移动栏不遮挡页面底部？

Question

我已经尝试了一切。当我在 Safari iOS 和 Safari Web 应用程序（保存到主屏幕）上遇到过度滚动问题时，主体不应滚动，因此主 div“

#content

”包含所有溢出滚动的内容。

问题是，当

#content

设置为

100vh

时，移动栏会覆盖内容的底部。根据 Google 的说法，这种情况很常见，我见过很多解决方案，但最有效的解决方案是设置

height: -webkit-fill-available;

，但不幸的是，这会阻止

#content

在 Chrome Windows 上滚动。

main.css（在 Chrome Windows 上滚动不起作用）

body, html {
    padding: 0;
    margin: 0;
    color: white;
    background-color: black;
    overflow: hidden;
}

body {
    position: fixed;   
}

#content {
    /* height: 100vh;    Scrollbar present (good) on Safari iOS, Chrome iOS, Chrome Windows, but 
                         bottom of page blocked by browser menu bar on Safari iOS and Chrome iOS (bad) */
    height: -webkit-fill-available;  /* Scrollbar present on Safari iOS, Chrome iOS (good), scrollbar 
                                        present but no actual bar to scroll down present
                                        on Chrome Windows, can't scroll down (very bad), bottom of page 
                                        not blocked by browser menu bar on Safari iOS, Chrome iOS (good) */
    width: 100vw;
    overflow-y: scroll;
}

index.html

<!DOCTYPE html>
<html lang="en-gb">
    <head>
        <meta charset="utf-8" />
        <title>React App</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <link rel="stylesheet" href="./main.css">
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root">
            <div id="content">
                <b>START<br/>3<br/>2<br/>1<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>1<br/>2<br/>3<br/>END<br/></b>  
            </div>
        </div>
        <script>
            // Stops overscrolling on "saved to home page" webapps
            window.addEventListener("scroll", (e) => {
                e.preventDefault();
                window.scrollTo(0, 0);
            });
        </script>
    </body>
</html>

可能不言而喻，但这不是实际的页面，这就是使用 React 构建的页面。

抱歉，如果我没有提供足够的详细信息，请说您是否需要任何信息 - 我会提供；我已经束手无策了，我已经 15 岁了，几天来我一直在努力让这个页面成为我想要的样子。

要展示的图像和视频

（想要的行为，可以滚动）
（不需要的行为，无法滚动）
Safari iOS，
```
height: 100vh;
```
（不良行为，页面底部被 Safari 菜单栏遮挡）
Safari iOS，
```
height: -webkit-fill-available;
```
（想要的行为，页面底部不会被 Safari 菜单栏遮挡）

1和4是我想要实现的目标。

如果你能帮助我，非常非常感谢:)

Answer 1

这可行，但它使用 Javascript，不太令人心碎，因为我已经不得不使用它来停止过度滚动。有点烦人的是你必须使用多少 JavaScript 来对抗 Safari！

const resizer = () => {
    document.getElementById("content").style.height = window.innerHeight + "px";
}

window.addEventListener("resize", (_e) => resizer());

document.addEventListener("DOMContentLoaded", (_e) => resizer());

Answer 2

你说你尝试了一切，所以我问这个有点傻，但你尝试过吗

@media

？

#content {height: 100vh; ...}
@media screen and (max-width: 767px) {
    #content {height: -webkit-fill-available;}
}

如果您尝试过，结果如何？

Answer 3

对主体使用 max-height: 100dvh（动态视口高度）——而不是 100vh——并回退 100vh，对我来说很有效，而且它几乎覆盖了所有浏览器。

如何让移动栏不遮挡页面底部？

问题描述投票：0回答：3

3个回答

最新问题

如何让移动栏不遮挡页面底部？

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3