本文介绍如何利用 css flexbox 布局让页面中的主体内容区域（body）自动占据剩余视口高度，并支持滚动，同时兼容动态高度的头部与底部。
本文介绍如何利用 css flexbox 布局让页面中的主体内容区域（body）自动占据剩余视口高度，并支持滚动，同时兼容动态高度的头部与底部。
在构建具有固定头部（header）和底部（footer）、且主体内容需填满剩余视口空间并可滚动的布局时，传统基于 height 或 calc() 的方案往往难以应对组件内部高度动态变化的情况。此时，Flexbox 是最简洁、健壮且语义清晰的解决方案。
核心思路是将容器设为垂直方向的 Flex 容器，让 header 和 footer 保持固有高度，而 body 利用 flex: 1 占据所有剩余空间，并通过 overflow-y: auto（推荐替代 scroll，以实现“按需显示滚动条”）启用智能滚动。
以下是完整实现：
<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 {
/* 高度由内容决定，也可设为固定值（如 100px）或 min-height */
background-color: #ffeb3b;
padding: 12px 20px;
}
.body {
flex: 1; /* 关键：弹性伸展，填充剩余空间 */
overflow-y: auto; /* 内容超长时才显示滚动条 */
background-color: #f5f5f5;
}
.row {
background-color: #f44336;
color: white;
padding: 10px 16px;
margin: 0 0 5px 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 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0，确保 body 在无内容时也不塌陷，并优先分配剩余空间；
- 使用 overflow-y: auto 而非 scroll，避免在内容较少时仍强制显示空白滚动条，提升用户体验；
- .header 和 .footer 无需显式设置 flex-shrink: 0（默认即为 0），但若需严格防止压缩，可显式添加；
- 若 header/footer 高度不固定（如含多行文本、图片等），Flexbox 依然能正确计算剩余空间，无需 JS 测量或重排。
? 进阶提示：
如需在 body 内部实现「滚动锚定」或监听滚动位置，可结合 body.addEventListener('scroll', ...)；若涉及 SSR 或初始渲染性能，建议对大量列表项（如本例 100 行）采用虚拟滚动（virtual scrolling）优化，但 Flexbox 布局结构本身完全兼容此类优化。
该方案兼容所有现代浏览器（Chrome 29+、Firefox 20+、Safari 9+、Edge 12+），无需 Polyfill，是响应式、可维护性与开发效率兼顾的最佳实践。
