移动端汉堡菜单overflow:auto无法显示全部内容问题

问题说明 #

实现汉堡菜单时，初始通过top: -100%隐藏，点击按钮后从顶部滑出。菜单设置position: fixed、height: 100%且overflow: auto，但当菜单内容高度超过窗口高度时，无法滚动至底部查看最后一项。将激活状态的top: 63px改为top: 0时滚动恢复正常，但布局要求必须保留top: 63px。

问题原因 #

设置height: 100%的同时指定top: 63px，会让菜单总高度等于视口高度，且从顶部63px位置开始向下延伸，导致菜单底部超出视口63px，这部分超出的内容无法通过滚动显示。

解决方法 #

方法一：用calc计算适配高度 #

将菜单的height改为calc(100% - 63px)，让菜单高度等于视口高度减去顶部偏移的63px，刚好填满剩余视口空间，避免内容超出。

修改后的CSS代码：

.header__menu_mobile {
    position: fixed;
    top: -100%;
    left: 0;
    padding: 0;
    width: 100%;
    height: calc(100% - 63px); /* 修改此处 */
    background-color: white;
    color: #252525;
    z-index: 3;
    overflow: auto;
    transition: all 0.3s ease 0s;
}
.header__menu_mobile .header__list {
    font-weight: 300;
    font-size: 16px;
    line-height: 19px;
    width: 100%;
}
.header__menu_mobile .header__list li {
    width: 100%;
    padding: 20px 0;
}
.header__menu_mobile .header__list li a {
    text-decoration: none;
    color: #252525;
}
.header__menu_mobile.active {
    top: 63px;
}

方法二：用inset属性简化定位 #

用inset属性替代top和height，直接定义菜单四个边的位置，让菜单从顶部63px开始，延伸至左右底部，自动适配高度：

修改后的CSS代码：

.header__menu_mobile {
    position: fixed;
    inset: -100% 0 0 0; /* 初始隐藏：顶部为-100% */
    padding: 0;
    width: 100%;
    background-color: white;
    color: #252525;
    z-index: 3;
    overflow: auto;
    transition: all 0.3s ease 0s;
}
.header__menu_mobile .header__list {
    font-weight: 300;
    font-size: 16px;
    line-height: 19px;
    width: 100%;
}
.header__menu_mobile .header__list li {
    width: 100%;
    padding: 20px 0;
}
.header__menu_mobile .header__list li a {
    text-decoration: none;
    color: #252525;
}
.header__menu_mobile.active {
    inset: 63px 0 0 0; /* 激活时：顶部为63px，其余边为0 */
}

HTML代码保持不变：

<div class="header__menu_mobile">
 <div class="container">
  <ul class="header__list">
   <li><a href="">Item 1</a></li>
   <li><a href="">Item 2</a></li>
   <li><a href="">Item 3</a></li>
   <li><a href="">Item 4</a></li>
   <li><a href="">Item 5</a></li>
   <li><a href="">Item 6</a></li>
   <li><a href="">Item 7</a></li>
   <li><a href="">Item 8</a></li>
  </ul>
  <div class="contacts">
   <a class="contact">Email</a>
   <a class="contact">Instagram</a>
   <a class="contact">Facebook</a>
  </div>
 </div>
</div>

内容的提问来源于stack exchange，提问作者Davyd Melnychenko