<p>用CSS Grid定义主控面板四区结构需设display: grid，配grid-template-rows: 64px 1fr 48px、grid-template-columns: 240px 1fr、min-height: 100vh，并确保侧边栏height: 100%或align-self: stretch，主内容区用height: calc(100vh - 64px - 48px) + overflow-y: auto防滚动失效。</p>
怎么用 CSS Grid 定义主控面板的四区结构
主控面板不是靠 float 或 position: absolute 拼出来的，得用 display: grid 在最外层容器上一次性划清 header / sidebar / main / footer 的边界。否则加个弹窗、拖拽任务卡、切暗色模式时，布局就容易错位或重叠。
关键写法：grid-template-rows: 64px 1fr 48px（头高64px、内容自适应、脚高48px），grid-template-columns: 240px 1fr（侧边栏固定240px、主内容撑满剩余）。必须配 min-height: 100vh，不然内容少时 footer 会悬浮在半空。
- IE11 不支持 Grid？那就 fallback 到
display: flex; flex-direction: column，别硬加前缀 -
grid-template-areas写起来顺手，但改一个区域名就得全局同步，维护成本高，不推荐用于生产环境 - 侧边栏高度要填满，必须设
height: 100%或align-self: stretch，否则在 Safari 下可能只显示一半
侧边栏 fixed 定位时 top 和 bottom 为什么不能省
只写 position: fixed; left: 0; top: 0; 是常见错误——它会让侧边栏盖住顶部导航栏。真实场景中，top 值必须严格等于 .pg-header 的 computed height（比如 64px），不能靠猜或写死 70px。
更关键的是 bottom: 0：没这句，长菜单滚动到底部时会被截断；而如果头部用了 box-sizing: border-box 或含 padding，实际高度得用开发者工具看 “Computed” 标签页确认，不能信 CSS 里写的 height。
立即学习“前端免费学习笔记（深入）”；
- 侧边栏内容超长？必须加
overflow-y: auto，否则滚动条出不来，文字直接被裁掉 - 小屏下宽度缩太窄？单靠
width: 20%不行，得加min-width: 200px保文字可读 - 媒体查询里改
min-width比改width更稳，例如@media (max-width: 768px) { .menu { min-width: 60px; } }
主内容区 overflow-y:auto 为什么总失效
内容区滚动失效，90% 是因为没同时控制高度和溢出行为。只设 overflow-y: auto 不够，若父容器没给明确高度约束，浏览器就不知道“从哪开始滚、滚到哪为止”。
正确组合是：height: calc(100vh - 64px - 48px)（扣掉头脚高度）+ overflow-y: auto。用 100vh 而不是 100%，避免嵌套容器高度计算链断裂。
- 加了
height: 100vh反而出双滚动条？那是没减去 header/footer 高度，页面总高超出了 viewport - Safari 对
overflow更敏感，没设overflow-y单独属性时，可能直接禁用滚动 - 内容区里放表格或图表组件？它们内部若用了
display: flex，记得子元素加min-width: 0，否则长文本会撑破容器
