本文详解如何通过 overflow: auto 与 max-height 正确创建可滚动的 HTML 导航菜单，解决因误用 height 或 overflow: scroll 导致内容溢出、页面被拉长等常见布局问题。
本文详解如何通过 `overflow: auto` 与 `max-height` 正确创建可滚动的 html 导航菜单，解决因误用 `height` 或 `overflow: scroll` 导致内容溢出、页面被拉长等常见布局问题。
在构建侧边栏导航、日期归档列表或标签云等垂直菜单时，开发者常希望菜单区域保持固定高度，并在内容超出时显示滚动条——而非撑开整个页面。但如原始代码所示，仅设置 height: 20px 配合 overflow: scroll 并不能实现预期效果，原因在于：
- height: 20px 过小，连单行
文本都无法完整容纳（含内边距、行高、字体大小），导致浏览器强制重排并可能忽略 overflow；
- overflow: scroll 会始终显示滚动条（即使内容未溢出），而更合理的选择是 overflow: auto，它仅在必要时显示滚动条；
- 更关键的是：应使用 max-height 而非 height——前者定义容器可扩展的最大高度，允许内容在未超限时自然舒展，超限后才触发滚动，兼顾可用性与健壮性。
✅ 正确做法如下：
<div class="column1" style="
float: left;
text-align: left;
overflow-y: auto; /* 仅对垂直方向启用滚动 */
max-height: 200px; /* 推荐值：200px 足够容纳多条链接 */
width: 220px; /* 建议显式设宽，避免浮动塌陷 */
border: 1px solid #e0e0e0;
padding: 8px;
">
<div>
<h5><a href="#4_May_2023">4 May 2023</a></h5>
</div>
<div>
<h5><a href="#12_Apr_2023">12 April 2023</a></h5>
</div>
<div>
<h5><a href="#28_Mar_2023">28 March 2023</a></h5>
</div>
<!-- 可继续添加更多项 -->
</div>? 关键优化说明：
- 使用 overflow-y: auto 替代 overflow: scroll，提升用户体验（无多余滚动条）；
- max-height 是核心：它让容器“弹性约束”，既防止无限拉伸页面，又保留内容可读性；
- 显式声明 width 和 padding 可规避浮动元素常见的布局塌陷与间距异常；
- 若需兼容旧版 IE，可补充 -ms-overflow-style: auto;，但现代项目通常无需。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免将 height 设为过小值（如 20px）——这会导致文本截断或触发意外换行，破坏语义；
- 浮动布局（float: left）在现代 CSS 中已逐渐被 Flexbox 或 Grid 取代；如重构项目，推荐改用：
.column1 {
display: flex;
flex-direction: column;
overflow-y: auto;
max-height: 200px;
width: 220px;
}- 移动端需额外添加 overscroll-behavior-y: contain 防止滚动穿透，提升交互一致性。
总结：实现可靠滚动菜单的关键不在于“强制压缩高度”，而在于“合理设定上限 + 智能溢出响应”。掌握 max-height 与 overflow-y: auto 的协同逻辑，即可在各种内容长度下稳定输出专业级导航体验。
