本文介绍如何利用 css flexbox 实现响应式布局：在固定高度的 header 和 footer 存在时，使中间的 body 区域自动占据剩余视口高度，并支持内容溢出时的垂直滚动。
本文介绍如何利用 css flexbox 实现响应式布局：在固定高度的 header 和 footer 存在时，使中间的 body 区域自动占据剩余视口高度，并支持内容溢出时的垂直滚动。
在构建全屏应用（如后台管理界面、数据表格页或仪表盘）时，常需将页面划分为 Header（顶部导航）、Body（主内容区）和 Footer（底部栏）三部分。其中 Header 和 Footer 高度由内部组件决定（可能动态变化），而 Body 必须严格填满两者之间的全部可用空间，同时保持可滚动——这正是传统 height: calc(100vh - headerH - footerH) 方案难以维护的根本原因：它无法响应内部尺寸变化，且缺乏弹性。
Flexbox 是最简洁、健壮的解决方案。只需将容器设为 display: flex; flex-direction: column，并赋予 .body 元素 flex: 1，即可实现“自动伸缩填充剩余空间”的行为。该属性等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0，意味着 body 将主动拉伸以耗尽父容器中未被 header/footer 占用的全部垂直空间，且当内容超出时，通过 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 {
height: 100px; /* 可替换为 min-height 或 content-fit 高度 */
background-color: #ffeb3b;
}
.body {
flex: 1; /* 关键：弹性占据剩余空间 */
overflow-y: auto; /* 内容超长时显示滚动条 */
padding: 8px; /* 可选：提升内容可读性 */
}
.footer {
height: 100px;
background-color: #ff9800;
}
.row {
background-color: #f44336;
padding: 10px;
margin: 0 0 5px 0;
color: white;
border-radius: 4px;
}const body = document.getElementById('body');
const createFakeData = (id) => {
const row = document.createElement('div');
row.innerHTML = `Row ${id}`;
row.classList.add('row');
body.appendChild(row);
};
for (let i = 0; i < 100; i++) {
createFakeData(i);
}✅ 关键优势说明：
- 无需硬编码高度计算：flex: 1 完全脱离对 header/footer 具体像素值的依赖，即使它们使用 min-height、fit-content 或 JS 动态调整高度，布局仍能自适应；
- 天然支持响应式：在移动设备或窗口缩放时，100vh 与 flex 组合可无缝重排；
- 语义清晰、维护成本低：相比绝对定位或 JS 监听 resize 手动计算高度，CSS 原生方案更可靠、性能更高。
⚠️ 注意事项：
- 确保 .container 的父级无意外 padding 或 border，否则可能破坏 100vh 精确性（可加 box-sizing: border-box 防御）；
- 若 .header 或 .footer 需要内容驱动高度（如多行文本），建议改用 min-height + flex-shrink: 0 防止被压缩，例如：.header { min-height: 60px; flex-shrink: 0; }；
- 在 Safari 等旧版浏览器中，若遇到 flex: 1 失效，可显式补充 flex-basis: 0 以增强兼容性。
综上，Flexbox 的 flex: 1 是解决“视口内弹性滚动区域”问题的现代标准方案——简洁、高效、可维护，应作为此类布局的默认首选。
