左侧菜单高度calc(100vh -76px)失效问题求助

问题原因 #

你当前用height: calc(100vh - 76px)定义菜单高度，100vh是视口高度，当页面内容长度超过视口（出现滚动条）时，菜单高度仍停留在视口剩余高度，无法跟随页面整体高度延伸，因此底部出现空白。

解决方案 #

方案1：基于Flex布局的流式高度（推荐） #

这种方案让菜单与页面内容区域联动，跟随页面整体高度自适应：

1. 先确保根元素占满全屏：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

2. 假设页面结构为「导航栏 + 内容容器（菜单+主内容）」，给内容容器设置Flex布局并占满导航栏剩余高度：

/* 导航栏样式（假设类名为navbar） */
.navbar {
  height: 76px;
  /* 其他导航栏样式 */
}

/* 内容容器 */
.page-container {
  display: flex;
  height: calc(100% - 76px);
  min-height: calc(100vh - 76px); /* 确保至少占满视口剩余高度 */
}

3. 修改左侧菜单的CSS，去掉原有的height属性，改用height: 100%让菜单填充容器高度：

.sidebar {
  width: 180px;
  z-index: 700;
  background-color: white;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; /* 替换原有的height: calc(100vh - 76px) */
}

方案2：固定定位菜单（适合需要菜单始终固定在左侧的场景） #

如果需要菜单不随页面滚动，始终固定在左侧，直接用top和bottom定位代替height：

.sidebar {
  width: 180px;
  z-index: 700;
  background-color: white;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed; /* 固定定位 */
  top: 76px; /* 与导航栏底部对齐 */
  bottom: 0; /* 贴紧页面底部 */
}

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