本文介绍如何利用 css flexbox 布局，让页面中带固定头部和页脚的主体内容区域自动占据剩余视口高度，并支持平滑垂直滚动，确保整体布局严格贴合 viewport。
本文介绍如何利用 css flexbox 布局，让页面中带固定头部和页脚的主体内容区域自动占据剩余视口高度，并支持平滑垂直滚动，确保整体布局严格贴合 viewport。
在构建具有固定 Header 和 Footer 的单页应用或数据表格界面时，一个常见需求是：Body 区域应动态填充视口（viewport）中 Header 与 Footer 之间的全部可用高度，并在内容溢出时启用滚动，而非撑开页面或出现空白间隙。纯 CSS 解决方案中，Flexbox 是最简洁、可靠且语义清晰的方法。
核心实现原理
关键在于将容器设为 display: flex + flex-direction: column，并利用 flex: 1 让 .body 占据剩余空间：
- .container 设置 height: 100vh 确保其高度等于视口；
- .header 和 .footer 使用固定高度（也可替换为 flex: 0 0 auto 配合内容自适应）；
- .body 设置 flex: 1（等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0），使其无条件拉伸以填满剩余空间；
- 同时添加 overflow-y: auto（推荐替代 scroll，避免始终显示滚动条），实现按需滚动。
完整可运行代码示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Viewport-Fit Scrollable Body</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; flex-direction: column; height: 100vh; /* 全屏高度 */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .header { height: 100px; background-color: #ffeb3b; display: flex; align-items: center; justify-content: center; font-weight: bold; border-bottom: 1px solid #ddd; } .body { flex: 1; /* 关键：弹性占据剩余空间 */ overflow-y: auto; /* 内容超长时才显示滚动条 */ padding: 12px; background-color: #f9f9f9; } .footer { height: 100px; background-color: #ff9800; display: flex; align-items: center; justify-content: center; font-weight: bold; border-top: 1px solid #ddd; } .row { background-color: #f44336; color: white; padding: 12px 16px; margin: 0 0 8px 0; border-radius: 4px; font-size: 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } </style> </head> <body> <div class="container"> <div class="header">Header — 固定高度</div> <div class="body" id="body"></div> <div class="footer">Footer — 固定高度</div> </div> <script> const body = document.getElementById('body'); const createFakeData = (id) => { const row = document.createElement('div'); row.textContent = `Row ${id + 1}`; row.classList.add('row'); body.appendChild(row); }; // 生成 120 行测试数据，确保触发滚动 for (let i = 0; i < 120; i++) { createFakeData(i); } </script> </body> </html>注意事项与最佳实践
- ✅ 避免 height: 100% 陷阱：在 Flex 容器内，对 .body 设置 height: 100% 无效且易引发计算错误；flex: 1 是标准解法。
- ✅ 响应式兼容性：Flexbox 在所有现代浏览器（包括 safari 10+、chrome 29+、firefox 28+）中稳定支持；如需兼容 IE10/11，可添加 -ms-flex: 1 前缀（但不推荐为新项目增加兼容负担）。
- ⚠️ 内容重绘优化：当 .body 中存在大量 dom 节点（如数百行列表）时，建议结合虚拟滚动（如 react-window 或 vue-virtual-scroller）提升性能，而非依赖原生滚动。
- ? 无障碍增强：为 .body 添加 role=”region” 和 aria-label=”main content” 可提升屏幕阅读器体验。
通过上述方式，你无需 JavaScript 动态计算高度，即可实现真正“贴合视口、智能伸缩、滚动可控”的三段式布局——这是现代 Web 布局中 Flexbox 的典型高效应用场景。