用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 增长与收缩行为，使其自动填满剩余空间并启用滚动。
给最外层容器（如 body 或某个包裹 div）设置 display: flex; flex-direction: column;，这样子元素会垂直排列。同时必须限制容器高度（如 height: 100vh;），否则 flex 无法计算“剩余空间”。
头部（header）和底部（footer）用固定高度（如 height: 60px;）或 flex: none; 防止被拉伸。它们默认不参与 flex 分配，自然保持尺寸稳定。
中间内容区（main）需满足两个条件：
部分旧版浏览器对 flex: 1 在 column 布局中的行为支持不一致；建议给中间区域加上 height: 0; 或 min-height: 0; 确保收缩有效。若内容极少，滚动条可能不出现——这是正常表现，因为没有溢出。
以上就是页面头部底部固定中间滚动怎么办_通过flex column布局实现的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
171
