别用 table 做后台布局，应采用 display: grid 划分区域，设 min-height: 100vh、grid-template-rows 和 grid-template-columns，并配合 overflow: auto 与精确的 fixed 侧边栏参数，确保滚动、响应式与折叠稳定。
用 table 做后台管理界面？别这么干
直接用 <table> 标签搭整个后台布局，是典型的历史包袱式写法。它会让侧边栏高度错位、内容区滚动失效、响应式适配几乎不可能——不是“能不能”，而是“一加筛选器或折叠菜单就崩”。<code><table> 的语义是展示二维数据，不是划分页面区域。强行用它做布局，<code>colspan 和 rowspan 会迅速失控，JS 控制展开/收起时 DOM 结构极易断裂。
display: grid 划分侧边栏 + 内容区最稳
Grid 是目前唯一能天然隔离各区域滚动、尺寸和重排逻辑的方案。关键不是写几行 CSS，而是定义清楚上下文边界：
- 外层容器必须设
min-height: 100vh，否则内容少时 footer 会悬空 - 用
grid-template-rows: 48px 1fr 48px固定头部/底部高度，中间用1fr自适应 - 侧边栏推荐
grid-template-columns: minmax(64px, 200px) 1fr，兼顾图标模式与文字展开 - 主内容区必须显式加
overflow: auto，否则长表格或表单会溢出不可见（Safari 尤其明显） - IE11 不支持 Grid？那就 fallback 到
display: flex; flex-direction: column，别硬塞-ms-grid前缀
position: fixed 侧边栏的三个必填参数
很多人只写 position: fixed; left: 0; top: 0;，结果侧边栏盖住头部导航。真实可用的写法必须同时满足：
-
top值必须等于.pg-header的 computed height（比如 48px），不能靠猜或写死 50px -
bottom: 0是强制项，缺了会导致长页面里侧边栏截断 - 内容区对应设
left: 200px（侧边栏宽度）+overflow-y: auto，且高度用calc(100vh - 48px)，不是100% - 如果头部用了
box-sizing: border-box或含 padding，实际高度要以开发者工具里Computed面板为准
侧边栏收起/展开时内容区怎么不跳动
单纯切换 width 会导致右侧内容区左右晃动。真正平滑的做法是：
- 用
min-width和max-width控制侧边栏范围，比如width: minmax(64px, 200px) - 收起时隐藏文字用
opacity: 0; width: 0; overflow: hidden;，而非 display:none（后者会触发重排） - 内容区用
transition: margin-left 0.3s ease配合 JS 切换 class，比纯 width 动画更稳 - 所有图标文字组合用
display: flex; align-items: center;，避免 baseline 对齐导致高度抖动
复杂点不在代码多寡，而在每个像素是否被明确约束：header 高度、侧边栏最小宽度、内容区 overflow 触发条件——漏掉任何一个，滚动、缩放、折叠时就会出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
