以下是实现页面顶部和底部固定、中间内容自适应的几种常见方法，附代码示例和适用场景分析：
方法一：Flexbox 弹性布局
<body style="margin:0; min-height:100vh; display:flex; flex-direction:column;">
<header style="height:60px; background:#ccc;">顶部固定</header>
<main style="flex:1; overflow-y:auto;">中间自适应内容</main>
<footer style="height:40px; background:#eee;">底部固定</footer>
</body>
特点：
- 现代浏览器首选方案
- 中间区域自动填充剩余空间
- 支持中间内容独立滚动
方法二：CSS Grid 网格布局
<body style="margin:0; height:100vh; display:grid; grid-template-rows:60px 1fr 40px;">
<header style="background:#ccc;">顶部固定</header>
<main style="overflow-y:auto;">中间自适应内容</main>
<footer style="background:#eee;">底部固定</footer>
</body>
特点：
- 二维布局能力更强
- 代码简洁直观
- 适合复杂布局场景
方法三：绝对定位
<body style="margin:0;">
<header style="position:fixed; top:0; width:100%; height:60px; background:#ccc;">顶部固定</header>
<main style="margin:60px 0 40px; height:calc(100vh - 100px); overflow-y:auto;">
中间自适应内容
</main>
<footer style="position:fixed; bottom:0; width:100%; height:40px; background:#eee;">底部固定</footer>
</body>
特点：
- 兼容性最好（支持IE8+）
- 需要手动计算高度
- 注意设置中间区域的外边距
方法四：Viewport单位 + Calc
<style>
header { height:10vh; background:#ccc; }
footer { height:8vh; background:#eee; }
main {
height: calc(100vh - 18vh);
overflow-y: auto;
}
</style>
<header>顶部固定</header>
<main>中间自适应内容</main>
<footer>底部固定</footer>
特点：
- 响应式布局友好
- 需注意移动端浏览器地址栏的影响
- 建议配合媒体查询使用
关键注意事项：
- 滚动处理：中间区域建议添加
overflow-y: auto实现独立滚动 - 高度计算：使用
100vh时需考虑移动端浏览器地址栏的显示/隐藏 - 层级问题：固定定位元素需设置
z-index防止内容覆盖 - 内容溢出：中间区域内容较多时需设置合理的滚动策略
- 浏览器兼容：Flexbox/Grid 方案需考虑目标浏览器支持情况
根据项目需求选择方案：
- 现代项目推荐 Flexbox 或 Grid
- 需要兼容旧浏览器时选择 绝对定位
- 响应式项目可尝试 Viewport单位 方案