用Flex column布局实现头部底部固定、中间滚动：容器设display: flex、flex-direction: column和height: 100vh；header/footer设height或flex: none；main设flex: 1、overflow-y: auto，必要时加min-height: 0。
用 Flex 的 column 布局实现头部底部固定、中间内容滚动，核心是让容器成为 flex 容器，主轴设为 column，并控制中间区域的 flex 增长与收缩行为，使其自动填满剩余空间并启用滚动。
设置容器为 flex column 布局
给最外层容器（如 body 或某个包裹 div）设置 display: flex; flex-direction: column;，这样子元素会垂直排列。同时必须限制容器高度（如 height: 100vh;），否则 flex 无法计算“剩余空间”。
固定头部和底部，不占弹性空间
头部（header）和底部（footer）用固定高度（如 height: 60px;）或 flex: none; 防止被拉伸。它们默认不参与 flex 分配，自然保持尺寸稳定。
中间区域设为 flex: 1 并启用滚动
中间内容区（main）需满足两个条件：
- flex: 1; —— 占据所有剩余高度
- overflow-y: auto; —— 内容超长时出现纵向滚动条
- 可选：min-height: 0;（尤其在嵌套 flex 中）防止 flex 项目最小高度干扰滚动
注意浏览器兼容与细节处理
部分旧版浏览器对 flex: 1 在 column 布局中的行为支持不一致；建议给中间区域加上 height: 0; 或 min-height: 0; 确保收缩有效。若内容极少，滚动条可能不出现——这是正常表现，因为没有溢出。
