移除.pc-mslider固定高度后滑块初始塌陷，JS计算高度无效求助

我用原生JS做了个简易响应式滑块，现在遇到个麻烦：要么给.pc-mslider容器设固定高度，窗口调整时会留白或遮挡内容；要么移除固定高度，初始加载时滑块直接塌陷。之前试过用第一张幻灯片的高度设置容器高度，结果得到的是height:0px，完全没用。

问题根源 #

1. 幻灯片大概率设了position: absolute，脱离了文档流，所以offsetHeight会计算成0——容器没法感知脱离文档流元素的高度。
2. 代码执行太早，DOM或者幻灯片里的图片还没加载完，高度计算自然不准确。

解决办法 #

办法一：正确计算绝对定位幻灯片的高度（适配带图片的场景）

先等所有图片加载完，再临时把幻灯片改回正常文档流计算高度，之后恢复定位：

const slider = document.querySelector('.pc-mslider');
const slides = document.querySelectorAll('.pc-mslide');

// 等待幻灯片内所有图片加载完成
function waitForImages() {
  const imgs = [...slider.querySelectorAll('img')];
  if (imgs.length === 0) return Promise.resolve();
  
  return Promise.all(imgs.map(img => {
    if (img.complete) return Promise.resolve();
    return new Promise(resolve => img.onload = resolve);
  }));
}

// 获取幻灯片真实高度
function getSlideRealHeight(slide) {
  // 临时取消绝对定位，让元素回到文档流
  const originalPos = slide.style.position;
  slide.style.position = 'static';
  const height = slide.offsetHeight;
  // 恢复原定位（如果原本没设置就用absolute）
  slide.style.position = originalPos || 'absolute';
  return height;
}

// 初始化高度
waitForImages().then(() => {
  const firstHeight = getSlideRealHeight(slides[0]);
  slider.style.height = `${firstHeight}px`;
});

// 窗口大小变化时更新当前激活幻灯片的高度
window.addEventListener('resize', () => {
  const activeSlide = slider.querySelector('.pc-mslide.active');
  if (activeSlide) {
    slider.style.height = `${getSlideRealHeight(activeSlide)}px`;
  }
});

办法二：改用CSS Flex布局（简化实现）

如果滑块的切换逻辑允许，可以放弃绝对定位，用Flex布局让容器自动适应高度：

.pc-mslider {
  /* 删掉固定高度 */
  position: relative;
  overflow: hidden;
  display: flex;
  transition: transform 0.3s ease;
}

.pc-mslide {
  /* 删掉绝对定位 */
  flex: 0 0 100%;
  width: 100%;
}

之后JS切换幻灯片时，只需要修改.pc-mslider的transform: translateX()属性就行，容器高度会自动跟着当前幻灯片走。

办法三：用scrollHeight计算高度（纯文本/已加载内容场景）

如果幻灯片里没有未加载的图片，直接用scrollHeight获取内容高度，同时确保代码在DOM加载完成后执行：

document.addEventListener('DOMContentLoaded', () => {
  const slider = document.querySelector('.pc-mslider');
  const slides = document.querySelectorAll('.pc-mslide');
  
  // 初始化高度
  slider.style.height = `${slides[0].scrollHeight}px`;
  
  // 窗口 resize 更新高度
  window.addEventListener('resize', () => {
    const activeSlide = slider.querySelector('.pc-mslide.active');
    slider.style.height = `${activeSlide.scrollHeight}px`;
  });
});

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