推荐用 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%) 实现滑入动画，体验更自然