固定头部底部，中间滚动布局实现方法

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《固定头部底部，中间滚动布局实现方法》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

用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; 确保收缩有效。若内容极少，滚动条可能不出现——这是正常表现，因为没有溢出。

今天关于《固定头部底部，中间滚动布局实现方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！