响应式Flex布局中实现DIV垂直填充剩余屏幕空间的问题

核心思路 #

用Flexbox布局就能完美实现你的需求，关键是控制好各区块的弹性分配和滚动属性：

• 把页面根容器（比如body）设为垂直方向的Flex容器，且最小高度占满屏幕
• 让MAIN区域自动填充剩余空间，同时开启内部滚动
• 移除FOOTER的固定定位，让它自然跟随内容流

关键代码实现 #

/* 全局重置与基础布局 */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* HEADER样式（保持原高度即可） */
header {
  height: 60px;
  background: #ccc;
}

/* 新增的粉色区块 */
.pink-section {
  height: 80px;
  background: pink;
}

/* MAIN核心设置 */
main {
  flex: 1; /* 自动填充HEADER、粉色区块之外的剩余屏幕空间 */
  overflow-y: auto; /* 内容超出时内部滚动，不挤压其他区块 */
  padding: 1rem; /* 可选，避免内容贴边 */
}

/* FOOTER样式，移除固定定位 */
footer {
  height: 50px;
  background: #333;
  color: #fff;
}

效果说明 #

1. HEADER和粉色区块会固定占据各自设置的高度，不会被挤压
2. MAIN区域会自动填满当前屏幕剩余的高度，当MAIN内的内容超过这个高度时，会在MAIN内部出现滚动条，不影响其他区块的布局
3. FOOTER会自然跟在MAIN下方，随页面整体滚动而移动，不再固定在屏幕底部

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