本文介绍如何利用 css flexbox 布局，让页面中带固定头部和底部的容器主体区域自动填充剩余视口高度，并支持内容溢出时的垂直滚动。
本文介绍如何利用 css flexbox 布局，让页面中带固定头部和底部的容器主体区域自动填充剩余视口高度，并支持内容溢出时的垂直滚动。
在构建具有固定页眉（header）和页脚（footer）的单页应用或数据表格界面时，一个常见需求是：主体内容区（body）应占据视口剩余全部高度，并在内容超出时启用滚动，而非撑开页面或导致布局断裂。传统百分比或 calc() 方案难以应对 header/footer 高度动态变化的场景，而 Flexbox 提供了简洁、健壮且语义清晰的解决方案。
核心思路是将外层容器设为 display: flex 且 flex-direction: column，并赋予 height: 100vh；header 和 footer 使用固定高度（或 flex-shrink: 0 保证不被压缩），而 body 则通过 flex: 1 占据所有剩余空间——该声明等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0，确保其弹性拉伸至可用空间，同时配合 overflow-y: auto 实现智能滚动（仅当内容超限时才显示滚动条）。
以下是完整实现代码：
本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。 本书内容全面深入，适合各层次PHP和MySQL开发人员阅读，既是优秀的学习教程，也可用作参考手册。
<div class="container"> <div class="header">Header</div> <div class="body" id="body"></div> <div class="footer">Footer</div> </div>
.container {
display: flex;
flex-direction: column;
height: 100vh; /* 充满整个视口高度 */
}
.header,
.footer {
flex-shrink: 0; /* 防止被 flex 压缩（即使未设固定 height 也安全） */
background-color: #ffeb3b;
padding: 16px;
}
.header { height: 100px; }
.footer { height: 100px; }
.body {
flex: 1; /* 关键：占据所有剩余空间 */
overflow-y: auto; /* 内容超长时启用滚动，不超时不显示滚动条 */
background-color: #f5f5f5;
}
.row {
background-color: #f44336;
color: white;
padding: 12px 16px;
margin: 0 0 4px 0;
border-radius: 4px;
}const body = document.getElementById('body');
const createFakeData = (id) => {
const row = document.createElement('div');
row.textContent = `Row ${id}`;
row.classList.add('row');
body.appendChild(row);
};
for (let i = 0; i < 100; i++) {
createFakeData(i);
}✅ 关键优势与注意事项：
- flex: 1 比 height: calc(100vh - 200px) 更鲁棒：即使 header/footer 高度由内容动态决定（如多行文本、图片加载后重排），Flexbox 仍能自动重分配空间；
- overflow-y: auto 优于 scroll：避免始终显示空白滚动条，提升用户体验；
- 建议为 .header 和 .footer 显式添加 flex-shrink: 0，防止在极端窄屏或字体缩放下被意外压缩；
- 若需兼容 IE10+，注意 flex: 1 在旧版中需写为 -ms-flex: 1（现代项目通常无需考虑）；
- 不要对 .body 设置 height 或 max-height —— 这会覆盖 flex 的弹性行为，导致滚动失效或布局错乱。
通过这一模式，你可轻松构建响应迅速、结构清晰、维护成本低的全高布局，适用于后台管理面板、实时日志查看器、无限滚动列表等多种场景。
