height: 100%在fixed元素上失效是因为其相对于初始包含块计算且受父容器和定位上下文干扰；应改用top: 0 + bottom: 0填满视口，并设置overflow-y: auto确保滚动。
为什么 position: fixed 侧边栏设 height: 100% 不生效？
因为 height: 100% 在 fixed 元素上是相对于「初始包含块」（通常是视口）计算的，但前提是父容器没设高度限制、且该元素没被其他定位上下文干扰。实际中，它常表现为“只撑开内容高度”，而非铺满整个视口——尤其当侧边栏内部内容少时，height: 100% 看似失效。
正确做法：用 top/bottom 替代 height: 100%
对 position: fixed 元素，直接控制垂直范围比依赖百分比高度更可靠：
-
top: 0+bottom: 0能强制填满视口高度，不依赖父容器或内容量 - 若需留出顶部导航栏（如
64px高），改用top: 64px+bottom: 0 - 配合
left或right控制水平位置，例如侧边栏靠左：left: 0
aside {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 240px;
background: #f5f5f5;
overflow-y: auto;
}
滚动区域要加 overflow-y: auto，否则内容溢出不可见
固定定位侧边栏默认不产生滚动条，即使内容超出视口高度。用户会误以为内容丢失。
- 必须显式设置
overflow-y: auto（或scroll）才能启用垂直滚动 - 避免在侧边栏内用
height: 100vh+overflow，因vh在移动端可能受地址栏缩放影响 - 如果侧边栏有 header/footer 固定区块，可用
flex布局 +flex-direction: column分配剩余空间
兼容性与常见陷阱
看似简单，但几个细节容易翻车：
立即学习“前端免费学习笔记（深入）”；
- 移动端 Safari 对
fixed元素的滚动支持较弱，若侧边栏内含输入框，弹出软键盘可能导致布局错位；可临时切为position: absolute应对 - 不要给
fixed侧边栏设transform（如translateZ(0)），它会创建新层叠上下文，可能遮挡后续元素 - 若主内容区用了
margin-left为侧边栏腾空间，记得加上padding-left或用grid/flex更稳妥，否则窄屏下文字可能被遮住
fixed 的尺寸参照系理解偏差。用 top/bottom 锚定边界，比死磕 height: 100% 稳定得多。 
