如何使用 Flexbox 实现视口内自适应高度的可滚动内容区

本文介绍如何利用 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 的弹性行为，导致滚动失效或布局错乱。

通过这一模式，你可轻松构建响应迅速、结构清晰、维护成本低的全高布局，适用于后台管理面板、实时日志查看器、无限滚动列表等多种场景。