推荐用 Flexbox 实现：父容器 display: flex，侧边栏 flex: 0 0 240px，中间区域 flex: 1；或用 Grid：grid-template-columns: 240px 1fr。避免浮动、绝对定位及 calc() 计算宽度。
侧边栏固定宽度、中间内容自适应，核心是用
CSS Flexbox
或
Grid
实现布局分离，避免浮动或
绝对定位
带来的维护难题。关键是让侧边栏“不参与弹性缩放”，中间区域“自动填满剩余空间”。
用 Flexbox 实现（推荐）
给父容器设
，侧边栏设固定宽度（如
或
），中间区域用
占满剩余空间：
父容器必须有明确高度（如）或内容撑开，否则中间区域可能无法正确伸展
侧边栏写更稳妥——表示不放大、不缩小、基准宽 240px
中间区域写，等价于，会自动计算并占据所有可用宽度
若需支持 IE10+，注意加前缀，或使用 Autoprefixer
用 CSS Grid 实现（现代简洁）
父容器设
，用
明确定义列宽：
例如：—— 左侧固定 240px，右侧占 1 份剩余空间
支持多列扩展，比如三栏：（左右固定，中间自适应）
无需设置子元素的 flex 属性，语义更清晰，响应式时可配合和
避免常见错误
不用
+
模拟，也不建议纯
，因为：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
浮动布局在高度不一致时易塌陷，需额外清除；绝对定位脱离文档流，影响后续内容排版
不要给中间区域设—— 在缩放或字体变化时可能因四舍五入产生缝隙或溢出
侧边栏若含滚动内容，应单独设，避免整个页面出现双滚动条
响应式补充建议
小屏下通常隐藏侧边栏，用汉堡菜单控制显隐：
用媒体查询将布局切为垂直堆叠：
或者直接侧边栏，中间区域
结合实现滑入动画，体验更自然
display: flexwidth: 240pxflex: 0 0 240pxflex: 1height: 100vhflex: 0 0 240pxflex: 1flex: 1 1 auto-ms-flexdisplay: gridgrid-template-columnsgrid-template-columns: 240px 1fr240px 1fr 320pxminmax()auto-fitfloatmargin-leftposition: absolutewidth: calc(100% - 240px)overflow-y: autoflexflex-direction: columndisplay: nonewidth: 100%transform: translateX(-100%)