使用 Flexbox 与 min-height 可实现动态高度布局，适用于自适应内容场景。1. 将容器设为 display: flex 且 flex-direction: column；2. 设置 min-height: 100vh 确保最小高度；3. 为目标子元素添加 flex-grow: 1 使其填充剩余空间；4. 通过 min-height 保障内容区最小尺寸，防止布局塌陷。典型应用包括管理后台、移动端单页和表单页面，兼顾空白处理与滚动扩展，布局直观可控。
在现代网页布局中，动态高度布局常用于需要自适应内容和视口变化的场景。使用 Flexbox 与 min-height 结合，可以轻松实现容器内部元素根据可用空间自动调整高度，同时保持良好的可读性和响应性。
Flex 容器中的高度自适应原理
当父容器设置为 display: flex 后，子元素会默认沿主轴排列，并能利用剩余空间进行伸缩。若希望某个子元素填满剩余垂直空间，需结合 flex-direction: column 和 flex-grow 属性。
关键在于将容器设为列布局，并让目标子元素“生长”以填充空白区域。此时 min-height 可作为最小高度保障，避免内容过少时布局塌陷。
示例结构：
立即学习“前端免费学习笔记（深入）”；
头部 主体内容
CSS 实现步骤
通过以下方式实现动态高度：
- 设置外层容器为 flex 布局，方向为 column，并赋予最小高度（如视口高度）
- 为主体区域添加 flex-grow: 1，使其占据所有可用空间
- 使用 min-height 确保内容不足时仍保留基本结构
CSS 样式示例：
.container {
display: flex;
flex-direction: column;
min-height: 100vh; /* 至少占满视口高度 */
}
header,
footer {
background-color: #f0f0f0;
padding: 1rem;
}
.content {
flex-grow: 1;
min-height: 200px; / 内容区最小高度 /
background-color: #e0e0e0;
padding: 1rem;
}
常见应用场景
这种布局特别适用于：
- 管理后台页面：顶部导航 + 侧边栏 + 主内容区，主内容需撑满剩余空间
- 移动端单页应用：页头+内容+页脚，内容区随数据加载动态扩展
- 表单页面：固定头部和按钮栏，中间滚动区域自动延展
即使内容较少，也能保证页面不出现难看的空白；内容较多时则自然滚动。
基本上就这些。掌握 flex-grow 与 min-height 的配合逻辑后，动态高度布局变得直观且可控。关键是理解 flex 容器如何分配剩余空间，以及 min-height 在其中提供的底线保障。不复杂但容易忽略细节。
