如何在上方Div高度动态增加时调整Div位置避免重叠

这是前端开发里挺常见的布局需求，我给你整理几个实用的实现方案，你可以根据自己的布局场景来选：

这种方案最省心，利用CSS的文档流特性或者现代布局模块，让浏览器自动处理元素位置，完全不需要写JavaScript。

子方案1.1：Flexbox布局 #

把两个div的父容器设置为Flex布局，方向设为垂直排列，这样上方div高度动态变化时，下方div会自动被“挤”到合适位置，绝对不会重叠。

示例代码：

<div class="parent">
  <div class="top-section">
    <!-- 这里放动态加载或高度变化的内容，比如异步加载的文本、图片 -->
    <p>初始内容</p>
    <button onclick="addContent()">点击增加内容</button>
  </div>
  <div class="bottom-section">
    我是下方需要调整位置的内容
  </div>
</div>

<style>
.parent {
  display: flex;
  flex-direction: column;
  /* 如果需要限制容器高度，可以添加min-height: 100vh; 让容器占满视口高度 */
}

.top-section {
  background: #f5f5f5;
  padding: 1rem;
  /* 高度会随内容自动变化，不需要固定height */
}

.bottom-section {
  background: #e8e8e8;
  padding: 1rem;
  /* 如果想让下方区域占满剩余空间，添加flex: 1; */
}
</style>

<script>
// 模拟动态增加内容的函数
function addContent() {
  const topSection = document.querySelector('.top-section');
  topSection.innerHTML += '<p>新增的动态内容，会让上方div高度增加</p>';
}
</script>

子方案1.2：Grid布局 #

和Flexbox类似，用Grid布局也能轻松实现。给父容器设置网格行模板，第一行自适应高度，第二行可以占剩余空间：

.parent {
  display: grid;
  grid-template-rows: auto 1fr;
  /* 同样可以加min-height: 100vh; 适配全屏场景 */
}

如果你的布局比较特殊，比如下方div是fixed/absolute定位（脱离了正常文档流），那CSS方案就失效了，这时候需要用JS监听上方div的高度变化，手动调整下方元素的位置。

推荐用MutationObserver来监听（比定时轮询性能好很多），它能精准捕捉到元素高度变化的触发事件：

示例代码：

<div class="top-div">
  <p>初始内容</p>
  <button onclick="addContent()">点击增加内容</button>
</div>
<div class="bottom-div">
  我是固定定位的内容，需要跟随上方div高度调整位置
</div>

<style>
.top-div {
  background: #f5f5f5;
  padding: 1rem;
}

.bottom-div {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 1rem;
  /* 初始位置会被上方div挡住，需要JS动态调整top值 */
}
</style>

<script>
const topDiv = document.querySelector('.top-div');
const bottomDiv = document.querySelector('.bottom-div');

// 创建观察者实例，监听高度变化
const observer = new MutationObserver(() => {
  // 获取上方div的实际高度
  const topHeight = topDiv.offsetHeight;
  // 调整下方div的top值，避免重叠
  bottomDiv.style.top = `${topHeight}px`;
});

// 配置监听选项：监听元素的属性变化、子节点变化（这些都会影响高度）
observer.observe(topDiv, {
  attributes: true,
  childList: true,
  subtree: true
});

// 模拟动态增加内容
function addContent() {
  topDiv.innerHTML += '<p>新增内容，高度增加啦</p>';
}

// 初始化时先设置一次位置
observer.takeRecords();
bottomDiv.style.top = `${topDiv.offsetHeight}px`;
</script>

• 优先用CSS方案：性能更好，代码更简洁，不需要维护JS逻辑
• JS方案只适合特殊布局：比如元素脱离文档流、需要自定义位置逻辑的场景
• 如果是窗口 resize 导致的高度变化，还可以额外监听window.resize事件，但MutationObserver已经能覆盖大部分动态高度变化的场景

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