侧边栏高度不随内容撑开需检查父容器是否为flex布局且align-items未被覆盖、无固定height、无干扰margin、min-height设在父容器更稳妥，并注意Safari兼容性及IE11降级方案。
侧边栏高度不随内容撑开？先确认父容器是否设了 display: flex
Flex 布局下，侧边栏默认不会自动拉伸到容器高度，除非显式设置 align-items: stretch（这是默认值，但常被覆盖）。常见错误是父容器用了 display: flex，但子项设置了 align-self: flex-start 或外层有 overflow: hidden 截断了伸展行为。
- 确保父容器没有
height固定值（如height: 500px），否则 flex 项只能在该范围内 stretch - 检查侧边栏是否意外加了
margin-bottom: auto或margin-top: auto，这会破坏默认拉伸逻辑 - 若父容器是
min-height: 100vh，侧边栏能随内容增长，但不会“填满视口”——除非内容本身足够高
用 min-height: 100vh 时为什么侧边栏还是塌陷？
min-height 是作用于自身，不是“让兄弟元素对齐”。如果主内容区很短，侧边栏设了 min-height: 100vh，它会自己撑满整个视口，但可能和主内容错位（尤其当主内容有 margin/padding 时）。
- 避免直接给侧边栏设
min-height: 100vh，而应设在父容器上，并配合display: flex - 若必须单设，记得加
box-sizing: border-box，防止 padding/border 导致实际高度超 100vh - 注意 Safari 对
min-height: 100vh的解析偶尔偏小（尤其地址栏缩放时），可改用min-height: 100dvh（需检查兼容性）
flex 布局中侧边栏与主内容高度不一致？看 flex-direction 和 flex-basis
横向布局（flex-direction: row）下，侧边栏和主内容默认等高；但若侧边栏设了 flex: 0 0 auto 或 height: fit-content，就会放弃 stretch 行为。
- 推荐写法：
aside { flex: 0 0 240px; }（固定宽度，允许拉伸高度） +main { flex: 1; } - 慎用
flex: 1 1 auto给侧边栏——它会参与宽度收缩，可能压缩侧边栏内容 - 若侧边栏内有绝对定位元素，其高度计算会被忽略，导致 flex 拉伸失效；此时需用
min-height: 1px触发 BFC
需要“内容多高就多高，但至少占满视口”？组合方案最稳
纯 min-height 或纯 flex 都有边界情况。真实项目里更可靠的是：父容器用 display: flex + min-height: 100vh，侧边栏不设高度，靠 flex 自然 stretch；再用 ::after 伪元素或空 div 做兜底防塌陷。
立即学习“前端免费学习笔记（深入）”；
- 父容器样式示例：
body { display: flex; min-height: 100vh; } aside, main { margin: 0; } aside { flex: 0 0 260px; } main { flex: 1; } - 如果侧边栏内部有浮动或清除浮动失败，加
overflow: hidden或display: flow-root防止高度塌陷 - IE11 不支持
min-height: 100dvh，也不完全支持flex的 stretch，真要兼容就得用 JS 监听resize手动同步高度
真正容易被忽略的点：flex 容器的 align-items 被重置、侧边栏子元素用了 position: absolute、或者 CSS 自定义属性在媒体查询里没同步更新 —— 这些都会让高度表现突然“失联”。
