用display: flex实现左侧导航+右侧内容布局最稳，父容器设display: flex和min-height: 100vh，左侧加width与flex-shrink: 0，右侧用flex: 1自适应，禁用float和absolute定位，推荐position: sticky实现导航固定。
左侧导航 + 右侧内容是最常见的管理后台布局，用 display: flex 是最稳、最易维护的方案；别用 float 或 position: fixed 单独定位导航栏，否则右侧内容容易被遮挡或错位。
用 flex 布局控制左右结构
核心是让父容器成为弹性容器，并显式约束左侧宽度、右侧自适应。常见错误是只给 .sidebar 设 width，却不加 flex-shrink: 0，导致缩放时被压缩变形。
- 父容器必须设
display: flex，且高度至少为min-height: 100vh - 左侧导航区设固定宽（如
width: 240px）+flex-shrink: 0 - 右侧内容区用
flex: 1，不设宽，让它自动填满剩余空间 - 避免在导航内部用
position: absolute或top: 0，它会脱离 flex 流，破坏对齐
让左侧导航顶部固定但不脱离文档流
想让它随页面滚动但始终贴顶，position: sticky 比 fixed 更安全——它仍属于 flex 子项，不会导致右侧内容“消失”或需要手动加 margin-left 补位。
- 给左侧导航外层容器（如
.sidebar）设position: sticky; top: 0 - 确保其父容器（即 flex 容器）有明确高度，例如
min-height: 100vh - 如果导航内容超长，需额外加
max-height: calc(100vh - 60px)和overflow-y: auto，否则会撑高整个页面
右侧内容区加载方式选 iframe 还是 DOM 切换
iframe 简单直接，适合隔离不同页面上下文（比如嵌入 ECharts 页面、第三方报表）；DOM 切换更轻量，适合纯前端单页逻辑，但要注意事件绑定和内存清理。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
- 用
<iframe src="xxx.html"></iframe>时，确保目标页无冲突样式，且跨域资源受限 - 用 JS 切换
<div> 显示/隐藏时，别只靠 <code>display: none，建议配合aria-hidden和tabindex="-1"提升可访问性 - 如果右侧要支持浏览器前进后退，iframe 方案天然支持；DOM 方案得自己用
history.pushState和popstate补全 - HTML 中把导航包在
<nav aria-label="main navigation"></nav>里，语义清晰且利于读屏器 - CSS 中用
@media (max-width: 768px)把.sidebar设为transform: translateX(-100%)并加transition - JS 只需切换一个类名（如
is-open），让导航回到视口内，无需操作display或width - 别忘了加
focus-trap：展开后将焦点移到第一个菜单项，关闭后移回触发按钮
响应式下左侧导航收起的最小改动
小屏设备上，左侧导航默认隐藏、点击按钮展开，这是最省力的适配方式。关键不是写一堆 JS 动画，而是用媒体查询 + transform 配合语义化结构。
真正难的不是让左边固定、右边自适应，而是当导航有二级菜单、内容页带滚动、同时还要支持键盘操作和屏幕阅读器时，那些 aria-expanded、aria-controls、inert 属性和焦点管理细节——它们不报错，但一漏就让整套交互不可用。
