用display: flex是当前最稳妥的两栏实现方式，关键在于侧边栏设width: 240px“钉死”，主内容区用flex: 1自动填满剩余空间，且容器需有height: 100vh等明确高度基准。
display: flex 是当前最稳妥的两栏实现方式
直接用 display: flex 比 float 或 position 更可控，尤其适合侧边栏固定、主内容自适应的后台场景。它天然避免高度坍塌、无需清浮动、折叠动画也更平滑。
关键不在加了 display: flex，而在尺寸行为的明确分工：
- 侧边栏设
width: 240px，不写flex，让它“钉死” - 主内容区用
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%），自动填满剩余空间 - 容器必须有确定高度，比如
height: 100vh或继承自 body；否则 flex 不会分配空间
常见错误：父容器漏写 height，导致 flex: 1 失效；或给 .main 加了 height: 100% 却没向上追溯到根元素，结果还是撑不满。
grid-template-areas 写了没效果？先查 display: grid
grid-template-areas 是语义化管理后台区域最直观的方式，但浏览器不会报错——写错就静默失效。90% 的问题出在父容器没设 display: grid。
必须确认三点：
- 根布局容器（如
.app-layout）显式写了display: grid -
grid-template-areas每行都用引号包裹，列数一致，例如："header header" "nav main" "footer footer" - 子元素的
grid-area值与模板中字符串**逐字符匹配**：大小写、空格、连字符都不能错；grid-area: sidebar和grid-area: "sidebar "（末尾空格）不等价
注意：grid-area 必须手动设置，不能靠 class 名自动映射；JS 动态插入的元素，得用 element.style.gridArea = "main" 显式赋值。
主内容区滚动失控？1fr 缺高度基准 + overflow 没锁死
后台里最常见的双滚动条问题（页面整体滚 + 主区内部又滚），根本原因是 1fr 没有可分配的高度基准，且 overflow 没显式约束。
必须同步做三件事：
- 根容器（如
.app-layout）设height: 100vh或由 React/Vue 父组件传入明确高度 - 主内容区（如
.main）加overflow-y: auto，别只写overflow: auto——横向溢出会撑破表格或侧边栏 - 若
.main内部还嵌了 Flex/Grid，它的直系子容器要加min-height: 0，否则弹性项可能强行撑开父容器
IE11 不支持 fr，兼容方案用 grid-template-rows: 60px calc(100vh - 60px)，注意 calc() 内运算符两侧必须有空格。
折叠侧边栏时主内容区跳动？别用 display: none
直接 display: none 侧边栏，会让主内容区瞬间拉满全屏，视觉上“弹一下”。这不是动画问题，是布局重排的必然结果。
更稳的做法是控制宽度收缩：
- 折叠状态设
.sidebar { width: 60px; min-width: 60px; }，保留图标区域 - 展开状态恢复
width: 240px，配合transition: width 0.3s ease - 主内容区不用改任何样式——
flex: 1或grid-area会自动重排，无跳动
真正复杂的地方不在怎么写两栏，而在于侧边栏是否支持嵌套菜单、是否要适配深色模式、是否要和路由联动控制展开状态——这些都不是纯 CSS 能闭环解决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
