使用position absolute时如何维护布局？自定义Dropdown下方hr位置异常

问题根源：因为下拉内容设置了position: absolute，会脱离正常文档流，Dropdown容器的高度不会被展开的下拉内容撑开，所以下方的<hr>会保持在容器原始位置的下方，无法跟随展开的下拉内容布局。

以下是几种针对性的修复方案：

方案1：通过JS动态调整容器高度 #

利用JavaScript监听下拉展开/收起事件，动态设置容器的高度，让容器高度包含下拉内容的高度，从而推动<hr>下移。

假设你的基础代码结构如下：

<div class="dropdown-container">
  <button class="dropdown-toggle">选择选项</button>
  <div class="dropdown-content">
    <div class="dropdown-item">选项1</div>
    <div class="dropdown-item">选项2</div>
    <div class="dropdown-item">选项3</div>
  </div>
</div>
<hr>

.dropdown-container {
  position: relative;
}
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background: #fff;
  border: 1px solid #eee;
  padding: 0.5rem;
  width: 100%;
}
.dropdown-content.active {
  display: block;
}

添加JS逻辑：

const toggleBtn = document.querySelector('.dropdown-toggle');
const container = document.querySelector('.dropdown-container');
const content = document.querySelector('.dropdown-content');

toggleBtn.addEventListener('click', () => {
  content.classList.toggle('active');
  if (content.classList.contains('active')) {
    // 展开时，容器高度 = 自身原有高度 + 下拉内容高度
    container.style.height = `${container.offsetHeight + content.offsetHeight}px`;
  } else {
    // 收起时恢复自动高度
    container.style.height = 'auto';
  }
});

方案2：改用非脱离文档流的布局（推荐） #

放弃绝对定位，改用相对定位+过渡动画，让下拉内容保持在文档流内，自然撑开容器高度，<hr>会自动跟随布局。

修改CSS部分：

.dropdown-container {
  position: relative;
  overflow: hidden;
  transition: height 0.3s ease;
  /* 初始高度设为触发按钮的高度 */
  height: 2.5rem;
}
.dropdown-content {
  position: relative;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  background: #fff;
  border: 1px solid #eee;
  padding: 0 0.5rem;
}
.dropdown-content.active {
  max-height: 150px; /* 设置足够容纳所有选项的高度 */
  padding: 0.5rem;
}

JS只需控制active类：

document.querySelector('.dropdown-toggle').addEventListener('click', function() {
  const content = document.querySelector('.dropdown-content');
  const container = document.querySelector('.dropdown-container');
  content.classList.toggle('active');
  // 同步调整容器高度
  container.style.height = content.classList.contains('active') ? `${2.5 + 6}rem` : '2.5rem';
});

方案3：添加占位元素 #

在Dropdown容器内添加一个隐藏的占位div，展开下拉时设置占位元素的高度等于下拉内容的高度，以此占据空间推动<hr>下移。

修改HTML：

<div class="dropdown-container">
  <button class="dropdown-toggle">选择选项</button>
  <div class="dropdown-content">...</div>
  <div class="dropdown-placeholder"></div>
</div>
<hr>

添加CSS：

.dropdown-placeholder {
  height: 0;
  transition: height 0.3s ease;
}
.dropdown-container.active .dropdown-placeholder {
  height: 120px; /* 与dropdown-content的高度一致 */
}

JS控制容器的active类：

const toggleBtn = document.querySelector('.dropdown-toggle');
const container = document.querySelector('.dropdown-container');
const content = document.querySelector('.dropdown-content');

toggleBtn.addEventListener('click', () => {
  container.classList.toggle('active');
  content.classList.toggle('active');
});

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