侧边栏高度不随视口变化的根本原因是height: 100%在flex容器中依赖父级显式高度，正确解法是外层设display: flex和min-height: 100vh，侧边栏用flex: 0 0 auto并配max-height与overflow-y: auto。
侧边栏高度不随视口变化，内容少时留白严重
根本原因是 height: 100% 在 flex 容器里不生效——它依赖父级显式高度，而父级若没设 height 或 min-height，百分比就失效。直接用 height: 100vh 看似简单，但会忽略顶部导航栏、底部工具栏等固定元素，导致侧边栏溢出或遮挡。
正确做法是让侧边栏成为 flex 子项，由容器控制拉伸：
- 外层容器设
display: flex和min-height: 100vh（不是height: 100vh，防内容超长时无法滚动） - 侧边栏加
flex: 0 0 auto（不缩放、不拉伸）或flex: 0 0 240px（固定宽度），再配overflow-y: auto - 主内容区用
flex: 1占满剩余空间，内部再用min-height: 100vh或height: 100%都可生效
flex布局下侧边栏滚动失效或错位
常见于把 overflow-y: auto 错加在侧边栏父容器上，或未限制侧边栏自身最大高度。flex 子项默认不约束高度，滚动必须作用在“有明确边界”的元素上。
实操要点：
- 侧边栏自身设
max-height: calc(100vh - 64px)（假设顶部栏高 64px），再加overflow-y: auto - 避免在侧边栏外层 wrapper 上设
overflow，那会截断 flex 布局的自然流 - 若用
position: sticky实现局部滚动，需确保父容器有overflow: visible（sticky 不在 overflow:hidden 内生效）
移动端侧边栏收起后仍占布局空间
用 display: none 最干脆，但若用 visibility: hidden 或 opacity: 0，flex 依然会计入尺寸，导致主内容区宽度没变。
响应式切换建议：
- 收起时用
display: none，展开时用display: block（或display: flex） - 如果需要过渡动画，改用
width: 0+overflow: hidden，同时主内容区用flex: 1自动填充 - 媒体查询中，别只改侧边栏，同步调整主内容区的
margin-left或flex-basis，否则布局会跳
vh单位在iOS Safari中滚动时高度抖动
iOS Safari 的地址栏隐藏/显示会动态改变 vh 值，导致侧边栏突然收缩或拉伸。这不是 bug，是浏览器行为——100vh 指的是「当前可见视口」，不是初始加载时的视口。
稳妥方案：
- 用 JS 获取初始
document.documentElement.clientHeight，设为 CSS 变量：:root { --full-height: 100vh; }→ JS 改成document.documentElement.style.setProperty('--full-height', h + 'px') - 或放弃
vh，用min-height: 100%+ 父级height: 100%向上逐层保证（需确保html,body都设了height: 100%） - 对 iOS 加专用 hack：
@supports (-webkit-touch-callout: none) { .sidebar { height: -webkit-fill-available; } }
最麻烦的其实是嵌套 flex 容器里多层 min-height 传递失败，这时候得一层层检查父级是否漏了 height: 100% 或 display: flex。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
