滚动条不会在移动设备上完全向下滚动页面

Question

直奔问题：我正在 HTML 和 CSS 上开发侧边栏菜单。在计算机设备上一切正常，但在移动设备上，页面不会滚动到页面末尾。我不知道问题出在哪里，但我将提供我编写的代码，以便有人可以帮助我解决这个问题。

HTML 部分

<div class="sidemenu">
    <div class="topmenu">
        /* The rest of the code
    </div>
    <div class="menucontent">
        /* The rest of the code
    </div>
</div>

CSS 部分

.sidemenu {
    position: fixed;
    width: 400px;
    height: 100vh;
    left: 0;
    background-color: #FFFFFF;
    transition: all 0.3s ease-in-out;
    z-index: 1;
}
.topmenu {
    width: 100%;
    height: 84px;
    border-bottom: 1px solid #000;
}
.menucontent {
    position: relative;
    width: 100%;
    min-height: calc(100% - 84px);
    max-height: calc(100% - 84px);
    overflow-y: auto;
    padding: 15px;
}

Answer 1

我修好了。我刚刚将 height: 100vh 从侧边栏替换为 100%

Answer 2

简单修复。您已在 侧边菜单 上设置 position: fixed。删除它并正常滚动

滚动条不会在移动设备上完全向下滚动页面

Scrollbar not scrolling completely down the page on mobile device

html

css

overflow

scrollbar