本文介绍如何利用 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 实现智能滚动（仅当内容超限时才显示滚动条）。
以下是完整实现代码：
<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 的弹性行为，导致滚动失效或布局错乱。
通过这一模式，你可轻松构建响应迅速、结构清晰、维护成本低的全高布局，适用于后台管理面板、实时日志查看器、无限滚动列表等多种场景。
