height: 100% 在侧边栏失效是因为父级高度未定义，导致计算值为0；需显式设置 html、body 高度为 100vh 或使用 fixed 定位以视口为包含块，或确保 flex 容器高度确定。
height: 100% 在侧边栏上不生效，不是写错了，而是它根本没东西可“百分比”——父级高度没定义，它算出来就是 0。
为什么 height: 100% 在侧边栏里常失效
CSS 的 height: 100% 不是“撑满屏幕”，而是“取包含块高度的 100%”。普通流中，包含块是最近的、有明确高度的祖先元素。而默认情况下：html 和 body 高度为 auto，由内容撑开；没有内容时，高度就是 0 → 子元素 height: 100% 自然也是 0。
- 即使你给侧边栏父容器（比如
.sidebar-wrapper）写了height: 100%，只要它的父级没显式高度，链式继承就断了 -
min-height: 100vh能视觉上“撑高”，但不等于height: 100%生效——后者仍依赖父级计算值 - 用
flex布局时，height: 100%同样受制于 flex 容器自身高度是否确定
position: fixed 为何能让 height: 100% “突然有效”
因为 position: fixed 彻底改变了包含块：它不再找父级，而是直接以视口（viewport）为包含块。height: 100% 此时等价于 height: 100vh，无需任何父级高度声明。
- 必须配
top: 0; bottom: 0;或inset: 0;才能真正占满垂直方向；只写height: 100%不够 - 脱离文档流后，主内容会“上移”覆盖原侧边栏位置，需手动给
main加margin-left或padding-left预留空间 - 滚动时侧边栏固定不动，但若需与主内容同步滚动（如长菜单+长正文），这种方案反而破坏体验
不用 fixed 也能让 height: 100% 生效的可靠写法
核心是让根元素获得可计算的高度，且不破坏文档流。最稳妥的是在全局样式中设置：
立即学习“前端免费学习笔记（深入）”；
html, body {
height: 100vh;
margin: 0;
}
- 之后所有后代元素的
height: 100%才有据可依；body成为有效的“高度锚点” - 若侧边栏嵌套在 Flex 容器中（如
display: flex; flex-direction: column;），还需确保该容器本身也有确定高度（例如父级也设height: 100%） - React/Vue 项目中，别把这条塞进组件内联样式——它必须作用于
html和body，否则无效
响应式场景下 height: 100% 和 fixed 的兼容陷阱
在小屏（如手机）上，侧边栏常需收起/展开，此时 position: fixed + transform 动画很常用，但 height: 100% 行为会因视口变化而波动。
- 横屏切换时，
100vh可能比实际可视区域高（地址栏遮挡），导致底部留白或滚动条；用100dvh更准确（但 Safari 旧版不支持） - 媒体查询中改
position（如从fixed切回static），height: 100%立刻失效，必须同步重置父级高度逻辑 - 使用
overflow-y: auto滚动侧边栏内部时，height: 100%必须作用于滚动容器本身，而非其子元素
真正麻烦的从来不是怎么写那行 height: 100%，而是你得清楚它到底在跟谁要高度——是视口？是父容器？还是 flex 上下文？漏掉其中任意一环，它就安静地缩成一条线。
