已被HTML5完全废弃，现代网页框架仅可用、CSS Grid或SPA；轻量但受限于跨域和高度塌陷，CSS Grid语义清晰且响应式友好，SPA则需在JS层管控生命周期与路由逻辑。

已被所有现代浏览器弃用，不能用。现在做网页框架，只有三条可行路径：、CSS Grid、单页应用（SPA）的布局组件。选哪个，取决于你是否需要跨页面复用、是否要 JS 控制内容、以及是否接受现代浏览器最低支持要求。

为什么还能用但必须小心？

它是最轻量的“套娃”方案，适合后台管理页、嵌入第三方仪表盘、或临时集成遗留系统。但它不是真正的页面框架——只是把另一个 HTML 文档“塞”进一个盒子里。

• 必须显式设置 width 和 height，否则高度塌陷为 0；height: 100vh 在父容器没高时也无效
• frameborder="0" 是 HTML5 废弃属性，但还得写，否则 Chrome/Firefox 仍可能显示边框；同时必须加 CSS border: none
• 隐藏滚动条不能只靠 scrolling="no"（已废弃），得在外层容器设 overflow: hidden
• 跨域时，父页 JS 无法读取 iframe 内的 document.title、location.href 或任何 DOM 节点
• 示例写法：

  <iframe src="sidebar.html" width="100%" height="calc(100vh - 60px)" frameborder="0" style="border: none; display: block;"></iframe>

CSS Grid 布局怎么定义 header / sidebar / main / footer？

这是目前最推荐的纯 HTML+CSS 框架方案，语义清晰、响应式友好、无 JS 依赖。核心是用 grid-template-areas 或 grid-template-columns 显式划分区域。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• grid-template-areas 的值里，每个单词代表一个子元素的 grid-area 名，不能含空格或特殊字符，比如 "header header" "nav main" "footer footer"
• 侧边栏固定宽 + 主内容自适应，写 grid-template-columns: 240px 1fr，别用 auto —— 容易被长文本或图片撑开变形
• min-height: 100vh 必须加在 Grid 容器上，否则 100% 高度不生效
• Grid 子项默认不继承宽度，main 区域若内容溢出，需额外加 width: 100% 或 overflow-wrap: break-word
• IE11 支持 Grid，但只认 -ms-grid 旧语法；如真需兼容，得手写两套，多数新项目已放弃

Vue/React 中用 或 当框架出口要注意什么？

这不是 HTML 嵌套，而是运行时由路由决定渲染哪个组件。框架逻辑在 JS 层，HTML 只剩一个挂载点。这意味着权限、加载状态、SEO 处理都得提前介入。

• （Vue Router）必须放在有 name 的组件内，才能支持命名视图；否则所有路由都挤进同一个出口
• （React Router v6）不接受 children，父组件里写死的内容会被完全替换，想保留 Header 就得把它写在布局组件内部，而非 外面
• 权限判断不能等 渲染完再检查——那样页面会先闪一下未授权内容；守卫逻辑必须写在布局组件的 useEffect 或 beforeEach 里
• 如果某些路由（如登录页）不需要全局 Header，得用 useLocation() 判断当前 path，再条件渲染

真正容易被忽略的点是：框架不是“怎么摆位置”，而是“谁控制生命周期”。 里页面完全独立；Grid 是静态结构，内容靠 DOM 注入；而 SPA 框架的每个区域都可能有自己的数据流、加载状态和销毁逻辑。选错方案，后期改起来不是调样式，而是重写数据链路。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！