纯HTML+CSS实现后台布局需严控position、height、overflow三者组合：fixed侧边栏top必须等于头部computed高度（如48px）且设bottom:0；内容区用height:calc(100vh-48px)和overflow-y:auto；侧边栏须设min-width:200px保可读性；外层Grid划分区域、内部Flex调细节，方能确保嵌套组件不溢出。
纯 HTML + CSS 实现后台管理系统布局时，“无缝衔接”不是指视觉上完全无边框，而是指各区域（头部、侧边栏、内容区、页脚）在滚动、缩放、嵌套组件时互不干扰、边界严丝合缝、不重叠不塌陷不溢出——这需要从 position、height、overflow 三者组合上卡死条件，而不是靠“看起来差不多”。
fixed 侧边栏必须对齐头部真实高度
常见错误是写 top: 0，结果侧边栏盖住 .pg-header。它必须预留顶部空间：top 值必须等于头部的 computed height（比如 48px），不能写死 50px 或依赖 padding 估算。
- 如果
.pg-header含box-sizing: border-box或上下 padding，实际高度 ≠ 样式中写的 height，务必用浏览器开发者工具看 Computed > height -
bottom: 0是强制项，否则长页面里侧边栏会截断，尤其在 Safari 中更明显 - 不要用
margin-top模拟留白，fixed 元素脱离文档流，margin 不起作用
内容区必须显式控制高度和溢出行为
主内容区若只设 overflow: auto，在 Safari 或嵌套表格/图表时极易失效；若同时加 height: 100vh，又可能撑高页面触发双滚动条。
- 推荐写法：
height: calc(100vh - 48px); overflow-y: auto;—— 48px 必须与头部真实高度一致 - 不能把
overflow加在body或外层容器上，否则滚动时 fixed 侧边栏会“跟着动”，违背定位本意 - 若内容区内部嵌了
iframe、canvas或第三方组件，它们默认可能溢出，需额外加max-height: 100%; overflow: hidden;
min-width 是侧边栏可读性的保命线
用 width: 20% 在小屏下会缩到文字挤成一团甚至图标消失，这不是响应式，是崩盘。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 底线约束：
width: 20%; min-width: 200px;—— 200px 是带图标+文字的最小安全宽度 - 媒体查询中优先调
min-width而非width，例如：@media (max-width: 768px) { .menu { min-width: 60px; } }，只收图标，结构不散 - 如果改用 Flex/Grid 布局替代 fixed，
flex-basis或grid-template-columns同样要配minmax(200px, 200px)或min-width
Grid 外层搭骨架 + Flex 内部调细节才真正稳
只用 Flex 做整页布局，遇到多行多列仪表盘或带固定表头的长表格时，容易失控；只用 Grid 又会让按钮组、卡片内标题对齐变得冗余。
- 外层用
display: grid划分header / menu / content / footer四个区域，用grid-template-rows和grid-template-columns锁死轨道 - 侧边栏内部导航项、内容区内的按钮组、卡片列表等，再用
display: flex控制对齐与伸缩 - Grid 的
gap替代 margin，避免因父子 margin 折叠导致的间距错位
真正难的不是写出第一版布局，而是当加了弹窗、表格、ECharts 图表后，它们是否还乖乖待在 .content 区里不破界——这取决于你一开始有没有把 overflow、box-sizing、height 这三者的组合关系钉死，而不是靠反复试错调 margin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
