如何让两个div之间的容器垂直填充剩余空间？

你的问题出在绝对定位让header和footer脱离了文档流，wrapper的100vh高度虽然占满屏幕，但between容器无法识别header和footer的存在，自然没法填充剩余空间。下面是两种解决方案，优先推荐第一种：

方案一：Flexbox布局（最简洁稳定） #

修改CSS，利用Flexbox的弹性特性自动分配空间：

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0; /* 清除浏览器默认边距，避免出现横向滚动条 */
}

.header {
  width: 100%; /* 用100%替代100vw，避免横向溢出 */
  /* 移除absolute定位，让元素回到文档流 */
}

.between {
  flex: 1; /* 核心属性：自动填充容器剩余空间 */
}

.footer {
  width: 100%;
  /* 移除absolute定位 */
}

HTML结构保持不变：

<div class="wrapper">
  <div class="header"></div>
  <div class="between"></div>
  <div class="footer"></div>
</div>

原理：把wrapper设为垂直方向的flex容器，header和footer保持自身高度，flex:1会让between容器自动占据wrapper中除header和footer外的所有剩余空间。

方案二：固定高度+Calc（适配必须用绝对定位的场景） #

如果一定要保留header和footer的绝对定位，需要明确它们的高度，然后通过计算给between设置高度：
假设header高度为60px，footer高度为40px：

.wrapper {
  height: 100vh;
  position: relative; /* 让绝对定位的子元素以wrapper为参照 */
}

.header {
  width: 100vw;
  position: absolute;
  top: 0;
  height: 60px; /* 明确高度 */
}

.between {
  min-height: calc(100vh - 60px - 40px); /* 计算剩余高度 */
  margin-top: 60px; /* 避免被header遮挡 */
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100vw;
  height: 40px; /* 明确高度 */
}

这种方法的缺点是：如果header或footer高度变化，between的样式必须同步修改，灵活性差。

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