Flex布局中Header与Footer固定高度失效的问题求助

我有一个从上到下分为三行的页面，顶部是固定高度（100px）的header，底部是固定高度（100px）的footer，中间区域占据剩余高度。

初始效果符合预期：

但在中间行添加内容后，若内容高度超过父容器，会导致父容器高度超出预期：中间区域变高，header和footer高度被压缩至不足100px，浏览器窗口缩放时所有行高度都会变化。

异常效果：

请问如何在此场景下保持header和footer的高度固定？

这是Flex布局里非常常见的小问题，核心原因是Flex项目默认的flex-shrink属性值为1——当容器空间不足时，项目会自动缩小来适配容器。咱们只需要针对性调整几个属性就能完美解决：

• 锁定外层容器高度
  首先确保页面的根容器（比如body或者最外层的布局容器）设置为：

  .container {
    height: 100vh; /* 占满当前视口高度 */
    display: flex;
    flex-direction: column; /* 让子元素垂直排列 */
    margin: 0; /* 清除默认边距避免出现不必要的滚动条 */
  }
  

• 固定header和footer并禁止收缩
  给header和footer添加样式，强制它们保持高度且不被挤压：

  header, footer {
    height: 100px;
    flex-shrink: 0; /* 关键属性：禁止元素被压缩 */
  }
  

  flex-shrink: 0会让这两个元素完全忽略容器的空间压力，牢牢保持你设置的100px高度。

• 让中间区域自适应并支持滚动
  中间内容区需要占据剩余所有空间，同时在内容过多时内部滚动，避免撑破布局：

  .main-content {
    flex: 1; /* 自动占据容器剩余的全部空间 */
    overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  }
  

这样设置之后，不管中间内容有多长，header和footer都会稳稳维持100px的高度，中间区域会自动填满剩余空间，内容过多时也只会在内部滚动，完全符合你的需求啦~

内容的提问来源于stack exchange，提问作者jz1108