CSS Grid 是实现文档阅读器双栏的唯一推荐方案：左侧固定宽280px放导航，右侧1fr自适应正文，配合gap、打印重置、高度继承链（100dvh）、响应式断点（width

用 CSS Grid 实现文档阅读器双栏，别碰 float 和 table

文档阅读器需要稳定、语义清晰、可打印且支持长内容滚动的双栏结构——grid-template-columns 是唯一推荐起点。浮动（float）会导致右侧内容在打印时错位；display: table 会破坏屏幕阅读器对文档结构的理解，且无法响应式切单栏。

常见错误现象：margin-left 配 float 后，右侧文字在 PDF 导出时被截断；table-cell 在 Chrome 打印预览中两栏高度不一致，导致页脚错位。

• 左侧栏固定宽度（如 280px），放目录、章节导航或元信息
• 右侧栏用 1fr 自适应，承载正文段落、代码块、引用等流式内容
• 必须加 gap: 1.5rem，避免窄屏下文字紧贴分隔线
• 打印样式里显式重置 @media print { .resume { grid-template-columns: 1fr; } }，否则双栏会强行挤进 A4 宽度

让左侧目录独立滚动，但高度严格匹配视口

阅读器里目录常需固定位置+可滚动，而正文要正常流式翻页——这要求左侧容器不脱离文档流，同时高度精确撑满可用区域。关键不是设 height: 100vh，而是建立高度继承链。

容易踩的坑：.sidebar { height: 100% } 在父容器没设 height 时完全无效；iOS Safari 地址栏缩放会触发 vh 值跳变，导致滚动条突然消失。

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

DeepBI DHTML 页面生成器

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

下载

• 根级写 html, body { height: 100dvh; }，比 100vh 更稳
• 外层容器用 display: flex; flex-direction: column;，让 header + main 成弹性子项
• 主内容区设 flex: 1; overflow: hidden;，强制占满剩余空间
• 左侧栏用 flex: 0 0 280px; height: 100%; overflow-y: auto;，不伸缩、不收缩、高度继承自父容器

响应式断点：何时切单栏，以及怎么切才不闪屏

文档阅读器在手机上必须切单栏，但不能靠 max-width: 768px 粗暴切换——很多平板横屏是 800px 宽却仍适合双栏，而某些小折叠屏竖屏仅 600px 却需保留导航可见性。应按“是否需要同时看目录和正文”来判断。

性能影响：用 @media (width 比 <code>max-width 更精准；切单栏时若只改 grid-template-columns，旧布局未销毁会导致重排卡顿。

• 推荐断点值：@media (width
• 切单栏时同步加 scroll-behavior: smooth 到 body，避免目录点击跳转突兀
• 左侧栏在单栏模式下用 position: sticky; top: 0; 保持导航始终可见，而非直接隐藏
• 避免在媒体查询里改 display 类型（如从 grid 改 block），会触发整树重绘

PDF 导出兼容性：双栏能正常分页的关键配置

用 print-css-rocks 或浏览器原生“另存为 PDF”时，双栏常出现右侧内容被截断、分页错乱、字体回退等问题。这不是 CSS 写错了，而是打印上下文默认忽略很多屏幕样式。

最容易被忽略的一点：grid-gap 在 PDF 中可能被忽略，导致两栏文字粘连；overflow: hidden 会让超出区域的内容直接消失，而不是分页延续。

• 打印样式中显式设置 .reader-layout { break-inside: avoid; }，防止目录和正文被拆到不同页
• 右侧正文容器加 break-before: always;（针对新章节），比依赖 <h2></h2> 默认行为更可靠
• 禁用所有 transform 和 filter，它们在多数 PDF 引擎中不生效或引发渲染崩溃
• 字体必须用 @font-face 嵌入或 fallback 到系统安全字体（如 "Segoe UI", "Helvetica Neue"），不能只靠 Google Fonts 链接

实际项目中，最复杂的不是写双栏，而是让目录滚动锚点、正文分页、打印适配、键盘焦点管理四者互不干扰。尤其当用户用键盘 Tab 切换目录项时，右侧内容必须自动滚动到对应章节——这个交互链一旦断裂，阅读体验就垮了一半。