答案：将侧边栏的top设为顶部导航栏的实际高度（如top: 48px），并配合bottom: 0和主内容区height: calc(100vh - 48px)避免遮挡与截断。
怎么让侧边栏不盖住顶部导航栏
侧边栏用 position: fixed 时，top: 0 是最常见错误——它会直接叠在 header 上面。必须把 top 设成和头部真实高度一致的值，比如 top: 48px。
- 用浏览器开发者工具看
.pg-header的computed height，别信 CSS 里写的height: 50px—— 如果加了padding或border，实际高度可能不同 -
bottom: 0必须写，否则长页面下侧边栏会被截断 - 侧边栏宽度建议用
min-width: 200px，防止文字挤成一团
主内容区滚动失效怎么办
当侧边栏固定、主内容区又很长时，overflow: auto 往往不起作用，或者滚动条跑到了 body 上，导致侧边栏跟着动。
- 主内容区不能只靠
overflow-y: auto，得配合高度计算：height: calc(100vh - 48px) - 别给主内容区设
height: 100vh—— 它会撑高整个文档，触发双滚动条 - 如果用了
display: flex布局，主内容区要加min-width: 0，否则遇到长 URL 或无空格文本时会撑破容器
表格结构怎么写才方便接后端数据
静态写满 <tr><td></td></tr> 的表格，后续加排序、搜索、分页全是硬伤。真正能动起来的起点是“语义清晰 + 预留 JS 注入点”。
<table id="data-table"> 必须有唯一 <code>id，别用class<th data-field="user_name"> 每列用 <code>data-field标字段名，大小写必须和后端 JSON 字段完全一致<tbody> 留空，所有行由 JS 动态插入，避免静态内容和逻辑打架<li>渲染函数推荐用 <code>document.createElement('tr')+appendChild，比innerHTML更安全、更兼容 IE11+- 只做左右两栏，用
display: flex+.sidebar { flex: 0 0 240px }就够稳 - 如果还要管顶部导航、底部状态栏、中间内容区四块位置，
grid-template-areas更直观，但改一个区域名就得全局同步 - 响应式收起侧边栏时，优先用
order: -1调整视觉顺序，别用display: none—— 否则键盘 Tab 流和屏幕阅读器会跳步
Flex 和 Grid 哪个更适合后台布局
Flex 是侧边栏+主内容这种一维布局的底线选择；Grid 才是四区域（头/侧/主/脚）强约束场景的正解。
侧边栏和表格本身都不难，难的是它们共存时的边界条件：fixed 元素的 top 值是否对齐真实 header 高度、内容区 height 是否扣除了 header、tbody 是否真正留空、grid-area 名字有没有拼错。这些点一漏，整个面板就卡在“看起来差不多，但一交互就崩”的状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
