如何在固定容器高度内自适应排布多个 div 元素

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

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

在构建响应式、无滚动条干扰的单页应用布局时，常需让内容区域严格适配容器高度（如 100vh），同时支持部分模块动态隐藏。核心挑战在于：当上层元素隐藏后，底层内容需自动伸展占满剩余空间，且自身内容超长时仅内部可滚动，而非整页溢出。

解决方案的关键在于 Flexbox 的弹性行为，而非传统 height: 100% 或 absolute 定位。以下是推荐实现方式：

✅ 正确结构与样式

.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% 更可靠——它明确声明“尽可能拉伸”，不受父容器是否设 height 影响，且天然兼容显隐切换（display: none 会从 flex 流中移除，剩余空间自动重分配）。

✅ JavaScript 控制显隐（轻量级）

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

配合 HTML 中的按钮即可实时测试效果：

<div class="container">  <div>    <button onclick="toggle('fix-one')">切换第一区</button>    <button onclick="toggle('fix-two')">切换第二区</button>  </div>  <div id="fix-one">...</div>  <div id="fix-two">...</div>  <div id="flexible">...</div></div>

⚠️ 常见误区与注意事项

• ❌ 避免对 .container 使用 height: 100% 而未设置其父级高度（如 html, body），否则计算失效；推荐直接用 100vh 或 100dvh（更安全的视口单位）。
• ❌ 不要给 #flexible 设 height: 100% —— 在 flex 容器中，这反而可能破坏弹性行为，导致滚动失效或高度塌陷。
• ✅ 使用 box-sizing: border-box 确保 padding/border 不额外增加尺寸。
• ✅ 若需兼容旧浏览器，可添加 -webkit-flex 等前缀（现代项目通常无需）。
• ✅ 对于移动端，建议用 100dvh 替代 100vh，避免 Safari 地址栏缩放导致的高度抖动。

✅ 总结

该方案以 语义清晰、零 JS 高度计算、天然响应式 为优势：
✅ 显隐任意固定区块，底部区域自动伸缩；
✅ 滚动限制在目标 div 内，不触发页面级滚动；
✅ 代码简洁，易于维护与扩展（如增加第四个动态区块亦只需加 flex: 0 或 flex: 1 即可）；
✅ 完全基于标准 CSS，无框架依赖。

只要掌握 flex: 1 + overflow-y: auto 这一黄金组合，即可优雅解决绝大多数“容器内自适应填高+局部滚动”场景。