CSS实现嵌套Header/Footer与侧边栏的Overflow:auto布局问题

一、右侧区域固定Header/Footer，内容区滚动的实现 #

给右侧整体容器设置垂直方向的flex布局，通过flex属性分配空间就能实现需求：

• 给右侧容器添加 display: flex; flex-direction: column; height: 100%;，确保容器占满父元素的可用高度
• 给右侧的Header和Footer设置 flex-shrink: 0;，让它们保持自身高度，不会被内容区挤压
• 给right_main设置 flex: 1; overflow-y: auto;，让它自动填充容器的剩余空间，内容超出时触发垂直滚动

核心CSS代码示例：

.right_container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.right_header, .right_footer {
  flex-shrink: 0;
}

.right_main {
  flex: 1;
  overflow-y: auto;
}

二、Header/Footer高度未知时，仅用CSS能否实现？ #

完全可以。上面的flex布局方案不需要提前知道Header和Footer的高度，flex布局会自动计算容器内的剩余空间，flex:1的right_main会自动占据Header和Footer之外的所有可用空间，同时flex-shrink:0保证Header和Footer始终保持自身的自然高度，不会被压缩或拉伸。

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