固定高度容器内多个div自适应布局

本文介绍如何使用 CSS Flexbox 实现容器内三个垂直排列 div 的动态高度分配：前两个 div 可显隐切换，第三个 div 自动填充剩余空间并支持内部滚动，确保整体不溢出视口。

在前端开发中，尤其是构建单页应用时，常会遇到一个经典布局难题：页面容器高度固定（例如占满整个视口），内部有多个垂直排列的区域。其中部分区域需要动态显示或隐藏，而主内容区域必须自动填满所有剩余空间，且当内容过长时仅在该区域内滚动，不能撑开整个页面导致全局滚动条。

这个需求看似简单，但用传统 CSS 方法（如 height: 100% 或绝对定位）实现，往往会遇到各种问题，代码也变得复杂。实际上，借助 CSS Flexbox 的弹性布局能力，可以清晰而优雅地解决这一问题。

正确结构与样式

首先看核心 CSS 结构。整体思路是构建一个垂直方向的 Flex 容器，并让需要自适应的子元素具备“吸收剩余空间”的能力。

.container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 26px); /* 减去可能的顶部工具栏/边距 */
  padding: 5px;
  box-sizing: border-box;
}

/* 固定内容区（可隐藏） */
#fix-one,
#fix-two {
  margin-bottom: 5px;
  /* 不设固定高度，由内容撑开；隐藏时自动释放空间 */
}

/* 弹性主内容区 —— 关键！ */
#flexible {
  flex: 1; /* 等价于 flex-grow: 1，优先吸收剩余空间 */
  overflow-y: auto; /* 内容超长时仅本区域滚动 */
  background-color: #f0f0f0;
}

这里的关键点在于：使用 flex: 1 比传统的 height: 100% 可靠得多。它明确告诉浏览器：“请把我拉伸，填满所有剩下的空间”。这种机制能自然与元素的显隐（display: none）配合——当一个元素被隐藏并从 Flex 流中移除时，剩余空间会自动重新分配，flex: 1 的元素会立刻占据它。

JavaScript 控制显隐（轻量级）

动态显示和隐藏的功能，只需一个非常简单的 JavaScript 函数即可实现：

function toggle(id) {
  const el = document.getElementById(id);
  el.style.display = el.style.display === 'none'  'block' : 'none';
}

在 HTML 中，通过按钮触发该函数，可以实时查看布局的动态调整效果：

  

    切换第一区
    切换第二区
  
  
...
  
...
  
...

常见误区与注意事项

实践中有几个细节需要特别注意，避开这些“坑”能让布局更加健壮：

• 容器高度设置不当：避免只给 .container 设置 height: 100%，却未给其父级（如 html, body）设定明确高度，这会导致高度计算失效。更推荐直接使用视口单位，如 100vh。
• 错误使用 height: 100%：不要给需要自适应的 #flexible 区域设置 height: 100%。在 Flex 容器中，这会破坏弹性行为，可能导致滚动失效或高度塌陷。
• 使用 box-sizing：为容器加上 box-sizing: border-box 是好习惯，确保内边距（padding）和边框（border）被包含在设定高度/宽度内，避免元素意外溢出。
• 浏览器兼容性：如需支持非常旧的浏览器，可添加 -webkit- 等前缀。对大多数现代项目而言，Flexbox 的支持已足够。
• 移动端优化：在移动设备上，建议使用 100dvh（dynamic viewport height）替代 100vh，避免 Safari 等浏览器中地址栏显示/隐藏导致页面高度剧烈抖动。

总结

总体而言，这套基于 Flexbox 的方案优势明显：语义清晰、无需 JavaScript 计算高度、天生响应式。

其好处可归纳为以下几点：
无论显示或隐藏上方的固定区块，底部区域都能自动伸缩，完美填充；
滚动严格限制在目标 div 内部，不会引发整个页面滚动，用户体验更可控；
代码简洁，维护和扩展方便（例如要增加第四个动态区域，只需设置 flex: 0 或 flex: 1 即可）；
完全基于标准 CSS，不依赖任何前端框架，移植性极高。

只要掌握 flex: 1 和 overflow-y: auto 这个黄金组合，就能优雅地解决绝大多数“固定容器内自适应高度 + 局部滚动”的布局场景。