时间戳

首页 > 解决方案 > 滚动条未在移动设备上完全向下滚动页面

html - 滚动条未在移动设备上完全向下滚动页面

问题描述

直接解决问题：我正在开发一个关于 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;
}

标签： htmlcssscrollbaroverflow

解决方案

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

推荐阅读