fixed侧边栏盖住头部是因为top值未匹配header真实computed height，需通过浏览器检查工具获取精确值并用calc(100vh - xpx)计算高度，同时确保内容区父容器设margin-left、overflow-y: auto加在上，并为侧边栏设置min-width保底。
fixed侧边栏总盖住头部？top值必须等于真实header高度
这不是CSS写错了，而是你没量准顶部导航栏的computed height。浏览器里右键检查.pg-header，看「Computed」面板里的height值——它可能被box-sizing: border-box、padding或font-size撑开，不是你写的48px就真是48px。
- 写死
top: 48px但实际高度是52.4px → 侧边栏上移4.4px，刚好卡在logo和菜单之间，看起来像“错位” -
bottom: 0漏写了 → 滚动时侧边栏在长页面里直接截断，最底下几项点不到 - 用
vh单位但没减去header →height: 100vh会让内容区撑满整个视口，结果body多出滚动条，fixed侧边栏反而跟着动
内容区滚动失效？别只靠overflow:auto
加了overflow-y: auto还滚不动，大概率是因为高度没算准，或者父容器没切断文档流。Safari尤其敏感，一不留神就裁掉下半截表格。
- 必须配
height: calc(100vh - Xpx)，X就是header真实高度，不能四舍五入 - 如果侧边栏用了
position: fixed，内容区父容器得设margin-left: 200px（或对应宽度），而不是靠float或inline-block硬挤 -
overflow: auto加在<main></main>上，不是或<div id="app">——后者会把滚动条带到整个页面，破坏fixed定位语义<h3>菜单收起后文字消失？min-width比width更关键</h3> <p>用<code>width: 20%做侧边栏，小屏一缩就剩图标都看不清。这不是响应式没写好，是根本没设保底宽度。-
min-width: 200px是底线，再小字就糊成一片，用户没法识别菜单项 - 收起逻辑用
classList.toggle("collapsed")时，别只改width，要同步控制min-width：比如.sidebar.collapsed { min-width: 60px; } - 媒体查询里改
min-width比改width更稳，例如@media (max-width: 768px) { .sidebar { min-width: 60px; } }，确保小屏至少能显示图标+tooltip
嵌入表格/图表后溢出？box-sizing和overflow组合必须钉死
一开始布局看着没问题，加个
<table>或<code><canvas></canvas>就破相——不是组件问题，是你没锁住三层关系：overflow、box-sizing、height。- 内容区容器必须设
box-sizing: border-box，否则padding会额外加高，导致calc(100vh - 48px)算不准 - 子元素如
<table>如果没设<code>width: 100%或table-layout: fixed，宽度过大会直接撑破父容器，溢出不可见 - 图表容器（比如
<div id="chart">）建议加<code>overflow-x: auto单独处理横滚，避免整块内容区被迫拉宽真正卡住的地方不在怎么画框，而在加第一个真实数据模块时——那时你才意识到，
height不是数值，是边界；overflow不是开关，是契约。
-
