主工作区需脱离文档流并置于flex父容器中，与侧边栏构成兄弟级弹性布局；外层占位、内层滚动，头部sticky固定，响应式通过CSS变量控制宽度，高度用flex嵌套避免硬编码。

主工作区必须脱离文档流才能稳定占位

主工作区不是“塞进页面中间就行”的区域，它需要明确的尺寸控制和定位上下文。常见错误是直接用 <div> 套内容、靠 <code>margin 或 float 推挤，结果在侧边栏展开/折叠、窗口缩放或浏览器缩放时频繁错位、重叠或留白。

真正稳定的方案是让主工作区与左侧容器形成「兄弟级弹性容器」关系，共享同一个父级 flex 上下文：

• 父容器设 display: flex，且高度撑满视口（height: 100vh 或通过 min-height: 100vh + body 无 margin 保证）
• 左侧容器用固定宽度（如 width: 240px）或 flex: 0 0 240px 锁定不缩放
• 主工作区用 flex: 1 占满剩余空间，不设 width，避免与 flex 冲突
• 若需滚动，仅对主工作区内部容器（如 <main></main> 或 <div class="content">）设 <code>overflow-y: auto，而非主工作区自身

  主工作区内容容器要分层隔离滚动与布局

  很多人把整个 <div class="main-area"> 设成 <code>overflow: auto，结果导航栏、面包屑、操作栏也跟着一起滚动，用户一滑就看不见标题了。

  正确做法是把主工作区拆成两层：

  立即学习“前端免费学习笔记（深入）”；

  • 外层（main-area）只负责占位和横向伸缩，不处理滚动
  • 内层（如 <div class="content-body">）包裹实际业务内容，并设 <code>overflow-y: auto; height: calc(100vh - 64px)（减去顶部栏高度）
  • 顶部操作栏（header 或 .main-header）应固定在主工作区顶部，用 position: sticky; top: 0 或嵌入 flex 子项中并设 flex-shrink: 0

  这样滚动只影响业务数据区，头部始终可见，也方便后续加搜索框、筛选器等常驻控件。

  响应式下主工作区不能靠媒体查询硬切宽度

  在小屏设备上，强行把主工作区宽度从 calc(100% - 240px) 改成 100% 很容易漏掉两个关键点：左侧菜单是否已隐藏？隐藏后主工作区是否重新计算了高度？

  
  DeepBI DHTML 页面生成器
  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
  下载

  更稳妥的做法是用 CSS 变量 + flex 控制显隐逻辑：

  • 给父容器加类名 sidebar-collapsed，同时设置 --sidebar-width: 0
  • 主工作区用 flex: 1; width: calc(100% - var(--sidebar-width))
  • 配合 @media (max-width: 768px) 主动添加该类，或用 JS 切换类（避免依赖 resize 事件抖动）
  • 注意：visibility: hidden 不释放空间，必须用 display: none 或 width: 0 + overflow: hidden

  主工作区高度计算容易忽略 header 和 footer 的侵占

  很多模板写 height: calc(100vh - 60px)，但没考虑：这个 60px 是写死的，而实际顶部栏可能因多语言、通知徽标、用户头像尺寸变化而变高；footer 若是绝对定位，也可能遮挡底部按钮。

  推荐用 flex 嵌套解法：

  • 主工作区父容器设 display: flex; flex-direction: column
  • 顶部栏设 flex-shrink: 0
  • 内容区设 flex: 1; overflow-y: auto
  • 底部操作栏（如有）同样 flex-shrink: 0

  这种结构不依赖具体像素值，也不怕字体缩放或动态插入元素，是管理后台最抗干扰的高度控制方式。