如何根据绝对定位的可变高度子Div动态调整首个子Div高度？

我懂你的烦恼——绝对定位的元素会脱离常规文档流，第一个子div根本"感知"不到它的存在，所以你设置的margin-bottom自然起不到想要的间距效果。下面给你几个实用的解决方案，优先推荐纯CSS的优雅实现：

方案1：CSS Grid布局（最推荐） #

Grid天生擅长处理容器内的空间分配，直接给父容器定义网格模板，就能让第二个子元素固定在底部，第一个子元素自动填充剩余空间，还能轻松控制两者间距：

<div class="parent">
  <div class="child1">我是第一个子元素，高度会随剩余空间自动调整</div>
  <div class="child2">我是高度可变的第二个子元素<br>哪怕我有好几行内容也没问题</div>
</div>

.parent {
  position: relative;
  width: 300px;
  height: 400px; /* 父容器可以是固定高度，也能设为自适应 */
  border: 1px solid #ccc;
  display: grid;
  grid-template-rows: 1fr auto; /* 第一个子元素占满剩余空间，第二个自适应自身高度 */
  gap: 10px; /* 这里就是你要的10px间距 */
  padding: 10px; /* 可选，给内容加些内边距避免贴边 */
}

/* 这里不需要给child2加绝对定位啦，Grid已经帮你固定在底部 */

方案2：Flexbox布局 #

Flexbox也能轻松实现需求，给父容器设置垂直方向的弹性布局，让第一个子元素填充剩余空间，用gap或者margin-bottom控制间距：

.parent {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.child1 {
  flex: 1; /* 让第一个子元素自动填充父容器的剩余空间 */
  overflow: auto; /* 如果内容超出高度，可添加滚动条 */
}

方案3：保留绝对定位的兼容方案（适合老项目） #

如果因为项目限制必须保留第二个子元素的绝对定位，可以用CSS变量配合少量JS动态计算高度，实现间距效果：

.parent {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid #ccc;
  padding-bottom: calc(var(--child2-height) + 10px); /* 预留第二个子元素高度+10px间距 */
  box-sizing: border-box;
}

.child1 {
  height: 100%;
  overflow: auto;
}

.child2 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

搭配一小段JS动态更新CSS变量：

function updateChildHeight() {
  const child2 = document.querySelector('.child2');
  const parent = document.querySelector('.parent');
  parent.style.setProperty('--child2-height', child2.offsetHeight + 'px');
}

// 初始化执行一次
updateChildHeight();
// 监听内容变化或窗口 resize，重新计算高度
window.addEventListener('resize', updateChildHeight);
// 如果子元素内容是动态加载的，记得在加载完成后调用updateChildHeight()

这个方案需要JS配合，不如前两个纯CSS方案简洁，所以优先推荐Grid或Flexbox哦。

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