HTML5已废弃frameset，应使用语义化标签（如nav、header）配合CSS Grid/Flex布局替代，通过1fr、calc()实现弹性分区与局部滚动，并用JS路由或fetch处理内容加载，避免样式和状态污染。
HTML 框架集（<frameset></frameset>）早已被 HTML5 废弃，现代浏览器不支持，且 SEO、可访问性、响应式和单页应用集成全都不兼容。直接用 <div> + <code><nav></nav> + CSS 布局模拟框架行为，不是“还原旧体验”，而是用语义化结构+CSS控制实现更健壮的分区导航——关键在于布局控制逻辑和 DOM 结构设计。
用 display: grid 替代 <frameset rows="100,*"></frameset>
传统 <frameset rows="100,*"></frameset> 把页面硬切为顶部固定高度、其余自适应的两块。用 Grid 更精确可控，且支持响应式断点重排：
<div class="layout">
<header class="top-bar">导航栏</header>
<main class="content-area">主内容</main>
</div>
<p><style>
.layout {
display: grid;
grid-template-rows: 100px 1fr;
height: 100vh;
}
@media (max-width: 768px) {
.layout { grid-template-rows: 60px 1fr; }
}
</style>-
1fr比*更规范，表示剩余可用空间的弹性分配 - 必须显式设
height: 100vh，否则1fr无参照基准 - 避免用
position: fixed模拟顶部栏——它会脱离文档流，导致main内容被遮挡
用 <nav></nav> + target="_self" 替代 <frame name="main">
旧框架中点击左侧菜单项，在右侧 <frame name="main"> 中加载新页面。HTML5 中没有跨区域页面加载机制，需靠 JS 控制内容替换或路由跳转：
- 若仍用多 HTML 文件：用
<nav></nav>包裹链接，所有<a></a>设target="_self"（默认），配合服务器端路由返回完整页面 - 若改用单页：监听
click，用fetch()加载 HTML 片段到<main></main>，或使用history.pushState()配合前端路由 - 绝对不要写
target="main"—— 浏览器找不到对应<frame>，会新开标签页
用 CSS overflow-y: auto 替代 <frame scrolling="auto">
旧框架中某个 <frame> 可独立滚动，不影响其他区域。纯 CSS 实现需明确限制容器尺寸并启用局部滚动：
立即学习“前端免费学习笔记（深入）”；
<aside class="sidebar">
<nav><a href="#">菜单项 1</a></nav>
<nav><a href="#">菜单项 2</a></nav>
</aside>
<p><style>
.sidebar {
height: calc(100vh - 100px); /<em> 扣除 header 高度 </em>/
overflow-y: auto;
}
</style>- 不能只写
overflow: auto—— 若容器无高度约束，会撑满整个页面，失去局部滚动意义 - 用
calc()或 Grid/Flex 的自动分配比写死像素更健壮 - 移动端慎用：iOS Safari 对嵌套滚动支持不稳定，建议优先用整体页面滚动+锚点跳转
真正难的不是把 <frame> 换成 <div>，而是旧框架隐含的“多文档上下文隔离”被打破后，JS 全局变量、样式污染、状态同步等问题会立刻暴露。迁移时先确保各区域内容能独立加载，再逐步解耦逻辑，而不是一上来就追求视觉还原。</div>
