左侧fixed菜单遮挡右侧内容时，应设左侧width并用inset:0+translateZ(0)，右侧用margin-left匹配宽度、min-height:100vh、height:calc(100vh-60px)+overflow-y:auto，且包裹在独立容器内。
fixed 左侧菜单后，右侧内容被遮挡怎么办
根本原因是 fixed 元素脱离文档流，右侧内容默认从页面左上角开始渲染，没“让出”左侧空间。不能只靠 margin-left 硬推——如果左菜单高度超出视口、或页面缩放，margin-left 值固定就容易错位。
正确做法是：左侧用 position: fixed，右侧用 margin-left + min-height: 100vh 保证最低撑满视口，且 margin-left 必须严格等于左菜单的宽度（含 border/padding）。
-
left和top要显式设为0，避免浏览器默认偏移 - 左侧容器需设
width（如200px），右侧对应设margin-left: 200px - 右侧内容外层必须有包裹块（如
<main></main>），不能直接对body设margin-left—— 否则滚动条会出现在整个页面，而非仅内容区
右侧内容滚动失效或滚动区域异常
常见现象是：右侧内容很长，但只能滚动整个页面（包括左菜单），或者右侧完全不滚动。本质是滚动上下文没落在正确容器上。
必须确保：右侧内容区域自身可滚动，而不是依赖 body 滚动。这意味着它需要 height 或 max-height + overflow-y: auto，且高度不能靠 height: 100% 向上继承——因为父级没设高时，100% 会算成 0。
立即学习“前端免费学习笔记（深入）”；
- 给右侧主容器设
height: calc(100vh - 60px)（减去 header 高度），再加overflow-y: auto - 避免在
html或body上设overflow: hidden，否则会截断右侧滚动 - 如果用了 Flex 布局，右侧项要加
flex: 1并设min-height: 0，防止 flex item 不收缩导致滚动失效
fixed 菜单在 Safari 或移动端表现错乱
Safari 对 fixed 元素的处理更敏感，尤其在页面缩放、软键盘弹出、地址栏显示/隐藏时，常出现定位漂移或滚动卡顿。
关键兼容策略是：不用 top: 0 依赖视口顶部，改用 inset: 0（现代写法），并补一层 transform: translateZ(0) 强制 GPU 加速；同时禁用 iOS 的弹性滚动回弹，避免菜单跟着“晃”。
- 左侧菜单加
inset: 0 0 0 0替代top/left/bottom/right: 0 - 加
transform: translateZ(0)或will-change: transform提升图层 - 在
body上加overscroll-behavior-y: contain，阻止滚动穿透到背景 - 移动端慎用
vh单位——Safari 的100vh在地址栏收起时会变大，推荐用100dvh（如果支持）或 JS 动态设高
菜单高度超过视口时，底部内容不可见
fixed 元素默认不随页面滚动，但如果菜单本身有内部滚动（比如长导航列表），就必须让它自己可滚动，而不是指望用户滚整个页面去看菜单底部。
错误做法是给菜单设 height: 100vh 再加 overflow-y: auto —— 这会导致菜单滚动条和右侧内容滚动条嵌套打架。应该把菜单内容单独包一层，控制其最大高度。
- 菜单外层设
position: fixed; top: 60px; bottom: 0; width: 200px（预留 header 高度） - 菜单内部内容区（如
<nav></nav>）设height: calc(100% - 48px)（减去 footer 或 logo 区域），再加overflow-y: auto - 避免给
html或body设height: 100%，否则影响子元素百分比计算
最易被忽略的一点：所有尺寸值（width、margin-left、top、bottom）必须保持单位一致，且优先使用 px 或 rem，少用 % —— 因为 % 在 fixed 上是相对于视口宽高的，而你通常想对齐的是设计稿里的固定宽度。
