JS动态添加HTML后如何调整Bootstrap容器适配激活幻灯片高度

当所有幻灯片采用绝对定位叠放实现轮播效果时，非激活的元素会脱离正常文档流，#quiz 容器无法感知到当前激活幻灯片的实际尺寸，自然会出现高度塌陷、需要手动固定高度的问题。

基础布局适配（无JS依赖，自动适配高度） #

• 给 #quiz 容器补充相对定位，作为内部幻灯片的定位参考基准：

#quiz {
  position: relative;
  /* 初始加载占位，避免内容渲染前出现高度闪烁 */
  min-height: 300px;
}

• 调整幻灯片的定位规则，仅让激活状态的幻灯片保留在正常文档流中：

.slide {
  width: 100%;
}
/* 激活态幻灯片留在文档流，自然撑开父容器高度 */
.slide.active-slide {
  position: relative;
  display: block;
}
/* 非激活幻灯片脱离文档流，叠放在相同位置，不占用布局空间 */
.slide:not(.active-slide) {
  position: absolute;
  top: 0;
  left: 0;
  /* 隐藏元素，同时支持过渡动画，比display:none更适配轮播的淡入淡出效果 */
  visibility: hidden;
  /* 禁用交互，避免隐藏的元素拦截页面点击事件 */
  pointer-events: none;
}

这种方案下，#quiz 的高度会完全等于当前激活幻灯片的内容高度，不需要任何JS计算，窗口缩放、内容动态调整时也会自动适配。

（可选）平滑高度过渡适配 #

如果需要切换幻灯片时避免高度突兀跳变，可追加少量JS逻辑实现平滑的高度过渡效果：

• 先给 #quiz 补充高度过渡规则：

#quiz {
  transition: height 0.3s ease;
}

• 在原有幻灯片切换逻辑（即修改 active-slide 类名的代码块）之后，追加高度同步逻辑：

// 获取当前激活的幻灯片DOM元素
const activeSlide = document.querySelector('.slide.active-slide');
// 同步设置#quiz的高度为激活幻灯片的实际渲染高度
document.getElementById('quiz').style.height = `${activeSlide.offsetHeight}px`;

• 给 #quiz 绑定过渡结束事件，过渡完成后清除固定高度，让内容保持自适应状态：

document.getElementById('quiz').addEventListener('transitionend', (e) => {
  // 仅响应高度属性的过渡结束事件，避免其他属性过渡干扰逻辑
  if (e.propertyName === 'height') {
    e.target.style.height = 'auto';
  }
});

• 不要给 .slide 设置固定高度，让内容自然撑开即可
• 不要把所有幻灯片都设为绝对定位，否则 #quiz 没有任何文档流内的内容，高度会塌陷为0
• 如果幻灯片内部有图片、外部字体等异步加载的资源，记得在资源加载完成后再触发一次高度适配，避免高度计算不准确

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