侧边导航栏超出视口高度无法纵向滚动的问题排查与解决

云原生阿岚

2026-7-11

侧边栏滚动失效问题排查与解决

问题现象

实现了点击按钮展开的侧边栏，已设置overflow-y:auto但未正常生效：

当视口高度约为496px时，侧边栏内容总高度远超视口，但仅能显示视口内部分内容，Lamborghini链接显示不全，Tesla链接完全不可见
仅展开showid下的子链接时，overflow-y:auto才会触发滚动效果

问题原因

侧边栏设置了固定高度height:496px，当视口高度小于该值时，侧边栏底部会超出视口范围，浏览器直接裁剪超出部分，导致这部分内容无法被看到或滚动
overflow-y:auto的作用是元素内部内容超出元素自身高度时显示滚动条，但原固定高度设置让元素本身先超出了视口，而非内部内容超出元素高度，因此滚动条无法正常触发（仅当展开子链接后，内部内容高度超过496px，才触发了元素内部的滚动）

解决方案

修改.sidenav的CSS样式，将固定高度改为视口高度，并调整盒模型确保内边距不会让元素超出视口：

.sidenav {
  /* 替换原固定height为视口高度 */
  height: 100vh;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  overflow-y:auto;
  transition: 0.5s;
  padding-top: 60px;
  /* 添加盒模型设置，确保padding包含在高度内 */
  box-sizing: border-box;
}