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值跳变，导致滚动条突然消失。
- 根级写
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 却需保留导航可见性。应按“是否需要同时看目录和正文”来判断。
DeepBI DHTML 页面生成器下载生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
性能影响：用
@media (width 比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;（针对新章节），比依赖默认行为更可靠- 禁用所有
transform和filter，它们在多数 PDF 引擎中不生效或引发渲染崩溃- 字体必须用
@font-face嵌入或 fallback 到系统安全字体（如"Segoe UI", "Helvetica Neue"），不能只靠 Google Fonts 链接实际项目中，最复杂的不是写双栏，而是让目录滚动锚点、正文分页、打印适配、键盘焦点管理四者互不干扰。尤其当用户用键盘
Tab切换目录项时，右侧内容必须自动滚动到对应章节——这个交互链一旦断裂，阅读体验就垮了一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
