HTML后台框架禁用frameset，应采用三层Flex布局：外层.layout设height:100vh，.header固定高，.main-content垂直flex内嵌.sidebar与.content水平flex，并用语义化标签确保可访问性与SEO。
用 flex 布局三块固定区域，别碰 frameset
HTML 管理系统框架现在根本不用 frameset——它早被废弃，不支持语义化、无法 SEO、移动端完全失效，Chrome 和 Firefox 已彻底移除渲染支持。真实项目里，你只需要一个 index.html + 三层 flex 嵌套：.layout（height: 100vh）、.header（固定高，如 60px）、.main-content（垂直 flex），再里面分 .sidebar 和 .content（水平 flex）。关键不是“怎么分”，而是“谁设高度”：外层必须有 100vh，否则内容区永远撑不满视口。
checkbox 控制菜单收起/展开，零 JS 就能跑
别一上来就引 Vue 或写一堆 toggleSidebar()。原生 input[type="checkbox"] + 相邻兄弟选择器就能搞定基础交互，且兼容所有现代浏览器。操作要点：
-
<input id="menu-toggle" type="checkbox">必须放在.sidebar同级且前面 -
.sidebar初始设width: 220px，input:checked ~ .sidebar改为width: 64px - 文字隐藏靠
overflow: hidden; white-space: nowrap;，不是 display:none - 加
transition: width 0.2s ease，否则切换像卡顿的旧电视
.content 滚动失效？八成是父容器没截断高度
后台页面内容动态加载，.content 必须可滚动，但常见错误是只给它设 overflow-y: auto，却忘了它的父级 .main-content 没高度约束。结果要么整个页面滚，要么内容直接溢出。正确链路：
-
.main-content设height: calc(100vh - 60px)（减去 header 高） -
.content不设height，只设overflow-y: auto - 内部表格加
table { width: 100% }，否则宽度失控破框 - 避免在
.content里用position: absolute—— 它会脱离 flex 流，滚动条失效
语义化标签不是装饰，是结构锚点
用 <header></header> 替代 <div class="header"> 不只为“看着规范”，而是让辅助工具、搜索引擎、甚至未来 CSS 选择器（比如 <code>section:has(> header)）能准确识别层级。实际影响：
立即学习“前端免费学习笔记（深入）”；
-
<nav></nav>包左侧菜单，屏幕阅读器会自动标记为导航区 -
<main></main>必须唯一，且包裹全部主体内容，否则键盘 tab 顺序错乱 -
<aside></aside>不适合放系统菜单——它是辅助性内容（如侧边广告、相关链接），菜单属于核心导航，该用<nav></nav> - 嵌套别过深：
<section><article><section></section></article></section>这种三层嵌套在后台页里基本没意义，平铺<header><nav><main></main></nav></header>更清晰
真正卡住人的从来不是“怎么写完”，而是“为什么改一行，整个布局就塌了”。flex 的父子高度传递、滚动上下文隔离、语义标签的隐式行为——这些细节不试错三遍，很难形成直觉。
