最推荐用display: flex或grid实现，禁用float和position: fixed；flex需设容器flex、侧栏flex-shrink: 0+width、主区flex: 1；grid用grid-template-columns: 240px 1fr。
直接用 display: flex 或 display: grid，别碰 float 和 position: fixed（除非真要悬浮滚动），前者语义清晰、响应式友好、无布局塌陷风险。
Flexbox 实现：侧边栏固定 + 主内容自动填满
这是目前最推荐的方案，兼容性覆盖所有现代浏览器（包括 Safari 12.1+、Chrome 49+、Firefox 48+），且 SSR 友好。
-
.layout { display: flex; }是容器必须声明的起点，不能只给子元素加flex - 侧边栏设
width: 240px（或min-width: 240px），再加flex-shrink: 0防止在窄屏下被压缩 - 主内容区用
flex: 1，不是flex: 1 1 auto—— 后者在某些旧版 Safari 下可能计算异常 - 避免给主内容区设
width或max-width，否则会破坏弹性行为；如需限制最大宽度，套一层内层容器再设
Grid 实现：两列显式定义，适合多区域扩展
当你未来可能加第二侧边栏、页脚分栏，或需要精确控制行高/对齐时，grid 更可控。
-
grid-template-columns: 240px 1fr是核心，1fr表示“剩余可用空间的一份”，不是百分比 - 不要写成
240px auto——auto会让主内容按内容宽度收缩，失去自适应效果 - 若主内容区需支持滚动（比如固定头部+侧边栏+可滚内容），用
overflow-y: auto即可，无需 JS 计算高度 - 注意
grid在 IE11 中需加-ms-前缀，但 2026 年已基本可忽略
为什么不用 margin-left 模拟留白？
这种写法在移动端缩放时极易触发横向滚动条，尤其当侧边栏宽度随 @media 动态变化时，margin-left 很难精准同步。
- 常见错误：
main { margin-left: 240px; }+aside { width: 240px; position: absolute; left: 0; top: 0; }—— 绝对定位脱离文档流，margin失效且影响后续元素布局 - 更隐蔽的问题：服务端渲染（SSR）中，
margin-left值无法响应客户端媒体查询，首屏可能错位 - 如果必须用
margin（比如遗留系统无法改结构），至少把侧边栏和主内容包裹在同一个父容器里，并用overflow: hidden防止溢出
响应式切换时最容易漏掉的点
侧边栏收起为 60px 或完全隐藏时，仅改宽度远远不够。
- Flexbox 下，除了改
width，还要同步改flex-shrink—— 收起后建议设为0，防止被压缩出视觉 bug - Grid 下，改
grid-template-columns时，别只写60px 1fr，小屏应切为1fr（单列），否则第二列会消失或错位 - 主内容区的
padding-left（如有）必须和侧边栏宽度严格一致，差 1px 都可能在某些字体渲染下暴露间隙 - 测试时务必在 iOS Safari 的「缩放页面」模式下检查，它会触发布局重排逻辑，暴露很多 CSS 假设漏洞
真正麻烦的从来不是怎么让侧边栏“固定”，而是当它从 240px → 60px → 0 的过程中，主内容区如何不跳、不闪、不重绘。这要求所有尺寸关系都用 CSS 原生机制表达，而不是靠 JS 插值或硬编码像素值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
