屏幕高度较小时无法查看全部头部下拉菜单项的解决方法

问题原因 #

当前代码存在两个核心问题：

• header 是固定定位（position: fixed），不会随页面滚动移动
• dropdown 使用固定值 max-height: 500px，当浏览器高度不足时，下拉菜单底部会超出视口范围，且页面滚动无法带动固定定位的下拉菜单，导致超出部分无法被查看

解决方案 #

修改 dropdown 的 CSS 属性，让它的最大高度适配视口剩余空间，并确保自身可滚动：

header {
  position: fixed;
  height: 5rem;
  width: 100%;
  background: blue;
}

.dropdown {
  position: absolute;
  /* 最大高度为视口高度减去header的高度，避免超出视口 */
  max-height: calc(100vh - 5rem);
  max-width: 448px;
  /* 从header底部开始定位，避免重叠 */
  top: 100%;
  overflow: auto;
}

.dropdown-item {
  background: orange;
  padding: 2rem;
  border-bottom: 1px solid white;
}

修改说明 #

• max-height: calc(100vh - 5rem)：100vh 代表当前视口的高度，减去 header 的 5rem 高度，确保下拉菜单的最大高度不会超出视口范围，避免内容被截断
• top: 100%：让下拉菜单从 header 的底部开始显示，避免和 header 内容重叠
• 保留 overflow: auto：当下拉项总高度超过 max-height 时，下拉菜单自身会出现垂直滚动条，用户可以直接滚动下拉菜单查看所有项，无需依赖页面滚动

修改后，无论浏览器高度多小，都能通过下拉菜单自身的滚动条查看全部14个下拉项。

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