响应式导航溢出修复求助：移动端导航项滚动失效问题

我来帮你解决这个导航项溢出屏幕的问题。你尝试的overflow-y: auto没生效，主要是因为响应式状态下的导航容器没有设置高度限制，并且position属性的组合让overflow规则无法正常工作。下面是具体的修复方案：

问题原因分析 #

当屏幕宽度小于600px时，.topnav.responsive设置了position: fixed但没有定义高度限制，导航项会无限向下延伸撑破视口；同时内部元素的定位规则没有配合滚动容器的要求，导致overflow属性无法触发预期的滚动效果。

修复步骤 #

我们需要给响应式导航容器添加高度限制、滚动属性，同时调整关键元素的定位逻辑，确保交互体验正常：

修改后的CSS代码（仅更新响应式区块） #

把你原代码中的@media screen and (max-width: 600px)区块替换为以下代码：

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: left;
    display: block;
  }
  /* 核心修复：给响应式导航添加高度限制与滚动规则 */
  .topnav.responsive {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100vh; /* 限制导航最大高度为设备视口高度 */
    overflow-y: auto; /* 垂直内容超出时显示滚动条 */
    overflow-x: hidden; /* 禁止横向滚动 */
  }
  /* 让汉堡按钮在滚动时固定在顶部 */
  .topnav.responsive .icon {
    position: sticky;
    top: 0;
    background-color: #f4f4f4; /* 和导航背景一致，避免滚动时露出下方内容 */
    z-index: 2;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
    padding: 20px 40px;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  /* 调整下拉菜单定位，使其跟随导航容器滚动 */
  .topnav.responsive .dropdown-content {
    position: relative;
    min-width: 100%; /* 让下拉菜单占满容器宽度 */
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

关键修改说明 #

• max-height: 100vh：将导航的最大高度限制为当前设备的视口高度，确保内容不会超出屏幕范围。
• overflow-y: auto：当导航项总高度超过视口高度时，自动显示垂直滚动条，允许用户滚动查看所有选项。
• position: sticky给.icon：让汉堡按钮在导航滚动时始终固定在顶部，方便用户随时收起导航菜单。
• 调整.dropdown-content为position: relative：避免下拉菜单脱离滚动容器，确保它能随着导航主体一起滚动。

效果验证 #

修改完成后，在小屏移动设备上打开导航时，所有导航项会被限制在视口高度内，超出部分可以通过滚动查看，不会再出现溢出屏幕的问题。

内容的提问来源于stack exchange，提问作者Jeremy Alexander