本文介绍如何通过 CSS 媒体查询（max-height）结合 overflow-y: scroll 和定位调整，解决移动端横屏等小视口高度下侧边菜单内容溢出、页脚错位等问题。
本文介绍如何通过 css 媒体查询（`max-height`）结合 `overflow-y: scroll` 和定位调整，解决移动端横屏等小视口高度下侧边菜单内容溢出、页脚错位等问题。
在响应式开发中，我们习惯使用 @media screen and (max-width: ...) 处理窄屏场景，但当设备处于横屏模式（如手机横置）时，视口高度可能远小于宽度（例如 iPhone 横屏高度仅约 320–450px），此时固定高度的侧边菜单极易出现内容截断、页脚悬浮于内容之上或被挤出可视区域等问题。
上述问题的根本原因在于：.menu-general 使用了 position: fixed; top: 0; bottom: 0; 占满全高，而 .menu-footer 又以 position: absolute; bottom: 0; 锚定在底部——当内容总高度（菜单项 + 页脚）超过视口高度时，页脚会“顶穿”菜单主体，导致布局崩溃。
✅ 推荐解决方案：针对小高度视口启用专用媒体查询，并做两处关键调整：
- 启用垂直滚动：为 #menu-general 添加 overflow-y: scroll，确保所有内容可滚动访问；
- 重置页脚定位：将 .menu-footer 的 position 从 absolute 改为 relative（在小高度下），使其自然跟随菜单内容流式排列，避免脱离文档流导致的覆盖或错位。
对应 CSS 实现如下：
/* 针对小高度视口（如手机横屏）的适配 */
@media (max-height: 450px) {
#menu-general {
overflow-y: scroll;
}
.menu-general .menu-footer {
position: relative;
}
}⚠️ 注意事项：
- max-height 媒体查询完全合法且广泛支持（Chrome 21+、Firefox 2+、Safari 3.1+、Edge 12+），无需额外 polyfill；
- 建议将临界值 450px 根据实际菜单内容微调（例如测试 iOS/Android 主流机型横屏高度），也可扩展为 @media (max-height: 480px) and (orientation: landscape) 提升精准度；
- 若需进一步优化体验，可在小高度下动态缩放字体（如 font-size: clamp(16px, 4vw, 24px);）或精简页脚内容，但滚动+相对定位已覆盖 95% 场景；
- JavaScript 逻辑无需修改——当前 jQuery 动画已兼容宽高响应逻辑，保持原样即可。
最终效果：在小高度设备上，菜单完整展开，用户可通过手指滑动浏览全部链接与页脚；页脚不再“悬空”，而是作为菜单末尾自然呈现，兼顾可访问性与视觉一致性。
