纯HTML+CSS做多端后台布局，关键在box-sizing、height、overflow三者组合：外层用calc(100vh-60px)设高，content不设height只设overflow-y:auto，flex:1占剩余空间，表格需table-layout:fixed+包裹div防溢出。
纯 HTML + CSS 就能做出多端可用的后台管理系统布局，但关键不是“写完能看”，而是“换屏不崩、嵌组件不溢出、滚动不打架”。真正在意交付质量的人，会从 box-sizing、height、overflow 三者的组合关系开始卡死。
flex 布局下 content 区高度塌陷怎么 fix？
常见错误是给 .content 设 height: 100%，结果在小屏或嵌套表格时内容被裁剪，或整个页面出现双滚动条。
- 外层容器（如
.main-content）必须有明确高度：用height: calc(100vh - 60px)，其中60px是 header 实际 computed height（不能靠猜） -
.content自身不设固定height，只设overflow-y: auto，让它随内容自然撑开、超出才滚动 - 如果用了
display: flex; flex-direction: column，确保父容器已设height，且子项中主内容区用flex: 1占满剩余空间 - 浏览器 DevTools → Computed → 检查
height是否为auto或具体数值，避免被min-height或flex-basis干扰
侧边栏在手机上缩成图标后文字消失但点击失效？
用 input[type="checkbox"] + label + .sidebar 实现收起/展开时，常因 DOM 顺序或样式覆盖导致交互断连。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
<input>必须和.sidebar同级、且在它前面；不能包裹在<div> 里再用 <code>~选择器 - 收起状态建议用
width: 64px（iOS 安全触控宽度），而非0或1px，否则 Safari 下:hover或点击区域丢失 - 菜单项文字隐藏要靠
overflow: hidden; white-space: nowrap; text-overflow: ellipsis，不能只靠父容器width截断 - 加
transition: width 0.25s ease-in-out，否则动画卡顿，用户感知为“没响应” - 给
table加width: 100%，并设table-layout: fixed，防止单元格撑宽容器 - 若表格列太多，加一层包裹
<div class="table-wrapper"><table>...</table></div>，并对该 wrapper 设overflow-x: auto - 避免在
.content上同时设height: 100vh和overflow-y: auto—— 优先用calc(100vh - Xpx)+overflow-y: auto - Chrome 和 Safari 对
overflow的触发条件不同：Safari 要求父容器有明确height才启用内部滚动，而 Chrome 有时会退化到 body 滚动
表格/图表嵌进 content 区后破出边界？
这是最隐蔽的兼容性坑：内容区明明设了 overflow-y: auto，但表格横向滚动条不出现在 content 内部，反而拖动整个 body。
立即学习“前端免费学习笔记（深入）”；
真正难的不是让布局在桌面端看起来整齐，而是当你往 .content 里动态插入一个 <iframe src="report.html"></iframe> 或一个三方图表库的 <div id="chart"> 时，它是否还老老实实待在滚动区域内——这取决于你一开始有没有把 <code>box-sizing: border-box、height 计算链、overflow 作用域这三者钉死，而不是靠“试试看”。
