本文详解如何通过 overflow: auto（或 scroll）配合 max-height 正确创建垂直滚动菜单，解决因误用 height 导致内容溢出、页面被拉长的常见问题。
本文详解如何通过 `overflow: auto`（或 `scroll`）配合 `max-height` 正确创建垂直滚动菜单，解决因误用 `height` 导致内容溢出、页面被拉长的常见问题。
在构建导航菜单、日期归档列表或分类链接栏时，常需限制菜单容器高度并启用内部垂直滚动——但许多开发者会错误地使用 height: 20px 配合 overflow: scroll，结果发现容器并未出现滚动条，反而撑开整个页面。根本原因在于：当内容高度小于设定的 height 时，overflow 不会触发；而若内容实际高度远超该值（如多行 + 堆叠），height 的刚性约束又会强制拉伸父容器或引发不可预期的布局塌陷
。
✅ 正确做法是：使用 max-height 替代 height，并搭配 overflow-y: auto（推荐）或 overflow: auto。max-height 允许容器在内容较少时自然收缩，仅在内容超出上限时才激活滚动机制，既保证灵活性，又确保滚动可用性。
以下是优化后的标准写法（含语义化与可维护性提升）：
<div class="sidebar-menu" style="
float: left;
text-align: left;
max-height: 200px;
overflow-y: auto;
border: 1px solid #e0e0e0;
padding: 8px 0;
">
<div>
<h5><a href="#4_May_2023">4 May 2023</a></h5>
</div>
<div>
<h5><a href="#12_May_2023">12 May 2023</a></h5>
</div>
<div>
<h5><a href="#25_May_2023">25 May 2023</a></h5>
</div>
<!-- 更多条目... -->
</div>? 关键要点说明：
立即学习“前端免费学习笔记（深入）”；
- max-height: 200px：设定滚动触发阈值，数值应根据实际内容密度和设计规范调整（如 150px–300px 常见）；
- overflow-y: auto：仅在垂直方向需要时显示滚动条（比 overflow: scroll 更友好，避免始终显示空白滚动轨道）；
- 移除 height: 20px：该值过小且刚性，无法容纳任何正常字号的标题+链接，是原问题的直接诱因；
- 建议添加 padding 和 border：提升视觉可识别性，避免滚动区域边界模糊；
- 若使用 CSS 类（推荐），请将内联样式移至外部样式表，例如：
.sidebar-menu { float: left; text-align: left; max-height: 200px; overflow-y: auto; border: 1px solid #eee; padding: 8px 0; }
⚠️ 注意事项：
- 避免对浮动元素（float: left）同时设置 display: inline-block 或与其他 Flex/Grid 容器混用，易引发清除浮动问题；现代布局中建议优先使用 display: flex 或 grid 替代 float；
- 在移动端需测试滚动体验，必要时添加 -webkit-overflow-scrolling: touch 提升 iOS 流畅度（仅限旧版 Safari）；
- 若菜单需响应式适配，可结合媒体查询动态调整 max-height，例如 @media (max-width: 768px) { .sidebar-menu { max-height: 150px; } }。
总结：滚动菜单的本质是「内容自适应 + 溢出可控」。牢记 max-height + overflow-y: auto 这一黄金组合，并摒弃过窄 height 的硬约束思维，即可稳定实现专业、可用、可维护的垂直滚动导航结构。
