推荐用 Flexbox 实现：父容器 display: flex，侧边栏 flex: 0 0 240px，中间区域 flex: 1；或用 Grid：grid-template-columns: 240px 1fr。避免浮动、绝对定位及 calc() 计算宽度。
侧边栏固定宽度、中间内容自适应，核心是用 CSS Flexbox 或 Grid 实现布局分离，避免浮动或绝对定位带来的维护难题。关键是让侧边栏“不参与弹性缩放”，中间区域“自动填满剩余空间”。
用 Flexbox 实现（推荐）
给父容器设 display: flex，侧边栏设固定宽度（如 width: 240px 或 flex: 0 0 240px），中间区域用 flex: 1 占满剩余空间：
- 父容器必须有明确高度（如
height: 100vh）或内容撑开，否则中间区域可能无法正确伸展 - 侧边栏写
flex: 0 0 240px更稳妥——表示不放大、不缩小、基准宽 240px - 中间区域写
flex: 1，等价于flex: 1 1 auto，会自动计算并占据所有可用宽度 - 若需支持 IE10+，注意加
-ms-flex前缀，或使用 Autoprefixer
用 CSS Grid 实现（现代简洁）
父容器设 display: grid，用 grid-template-columns 明确定义列宽：
- 例如：
grid-template-columns: 240px 1fr—— 左侧固定 240px，右侧占 1 份剩余空间 - 支持多列扩展，比如三栏：
240px 1fr 320px（左右固定，中间自适应） - 无需设置子元素的 flex 属性，语义更清晰，响应式时可配合
minmax()和auto-fit
避免常见错误
不用 float + margin-left 模拟，也不建议纯 position: absolute，因为：
立即学习“前端免费学习笔记（深入）”；
- 浮动布局在高度不一致时易塌陷，需额外清除；绝对定位脱离文档流，影响后续内容排版
- 不要给中间区域设
width: calc(100% - 240px)—— 在缩放或字体变化时可能因四舍五入产生缝隙或溢出 - 侧边栏若含滚动内容，应单独设
overflow-y: auto，避免整个页面出现双滚动条
响应式补充建议
小屏下通常隐藏侧边栏，用汉堡菜单控制显隐：
- 用媒体查询将
flex布局切为垂直堆叠：flex-direction: column - 或者直接
display: none侧边栏，中间区域width: 100% - 结合
transform: translateX(-100%)实现滑入动画，体验更自然
