如何让同级元素的第一个子元素占满剩余屏幕高度

你需要让main的第一个子元素#first刚好填满header下方的剩余屏幕空间，同时整个页面支持正常滚动（无固定定位的header/footer），后续section内容可被推至视口外并正常滚动。以下是基于Flexbox的实现方案：

核心CSS代码 #

/* 重置基础样式，确保高度计算准确 */
html, body {
  height: 100%;
  margin: 0;
}

/* 将body设为垂直方向的flex容器，让header、main、footer垂直排列 */
body {
  display: flex;
  flex-direction: column;
}

/* 让main占据header和footer之外的全部垂直剩余空间 */
main {
  flex: 1;
  /* 将main也设为垂直flex容器，用于分配内部子元素的空间 */
  display: flex;
  flex-direction: column;
  min-height: 0; /* 解决flex容器中子元素溢出时高度计算异常的问题 */
}

/* 让#first占据main内部的全部剩余垂直空间 */
#first {
  flex: 1;
  overflow: auto; /* 可选：如果#first内部内容过多，开启内部滚动避免撑高容器 */
}

方案说明 #

1. 外层flex容器（body）：通过flex-direction: column让header、main、footer垂直分布，flex: 1赋予main自动填充剩余垂直空间的能力。
2. 内层flex容器（main）：同样设置垂直flex布局，让子元素#first和后续section按垂直方向分配空间；min-height: 0是关键，它能打破flex容器的默认高度限制，确保子元素能正确填充剩余空间。
3. 目标元素（#first）：flex: 1使其自动占据main内的所有剩余空间，刚好填满header下方到屏幕底部的区域（初始加载状态）；添加overflow: auto可避免内部内容过多时撑高整个容器。

效果验证 #

• 初始加载时，#first刚好填满header之外的剩余屏幕空间，footer会被后续section的内容推至视口外（如果内容足够多）。
• 滚动页面时，header、main（包含#first和后续section）、footer会一起正常滚动，#first始终保持分配的高度，不会随滚动改变。

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