Flexbox 实现头部底部固定、中间自适应布局的关键是：容器设为 column 方向 flex 布局并 min-height: 100vh；header 和 footer 设 flex-shrink: 0 防压缩；main 设 flex: 1 占据剩余空间，并添加 overflow-y: auto 防内容溢出。
用 Flexbox 实现头部底部固定、中间自适应的纵向布局，核心是把容器设为 flex 垂直方向布局，并让中间区域“撑满剩余空间”。
设置容器为垂直 flex 布局
给最外层容器（比如 body 或一个包裹 header、main、footer 的 div）设置：
display: flexflex-direction: column-
min-height: 100vh（确保至少占满视口高度）
头部和底部不伸缩，中间区域自动填充
给三部分分别设置弹性行为：
-
header, footer：加flex-shrink: 0（防止被压缩），也可顺手加flex-grow: 0和flex-basis: auto明确不放大 -
main（或中间内容区）：加flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），它会占据所有剩余空间
注意边界与内容溢出
常见问题及处理方式：
立即学习“前端免费学习笔记（深入）”；
- 如果
main内容太多导致滚动，建议只让main可滚动：main { overflow-y: auto; } - 避免
body默认 margin 干扰，加body { margin: 0; } - 若用
html或body作 flex 容器，需确保它们也继承高度：html, body { height: 100%; }
一个最小可用示例
HTML 结构简洁即可：
<body> <header>顶部</header> <main>这里是自适应的主体内容</main> <footer>底部</footer> </body>
CSS 如下：
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header, footer {
flex-shrink: 0;
background: #eee;
padding: 1rem;
}
main {
flex: 1;
overflow-y: auto;
padding: 1rem;
}
不复杂但容易忽略细节，关键是理解 flex: 1 在 column 布局里起的是“剩余空间分配器”的作用。
