如何实现固定容器高度下多 div 元素的自适应布局？

本文共计768个文字，预计阅读时间需要4分钟。

使用CSS Flexbox实现容器内三个垂直排列的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; }

✅ 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 这一黄金组合，即可优雅解决绝大多数“容器内自适应填高+局部滚动”场景。