W3Schools幻灯片文本Div高度统一问题求助

问题背景 #

基于W3Schools幻灯片组件修改后，添加文本内容出现各幻灯片中.text容器高度不一致的问题，需要让所有.text容器自动适配3个幻灯片中最高的那个的高度，且不使用固定高度（避免响应式布局维护困难）。

解决方案 #

由于幻灯片切换时非活跃幻灯片处于display: none状态，无法直接通过CSS获取其高度，因此采用JavaScript动态计算并设置高度的方案，具体实现如下：

1. 核心逻辑 #

• 临时显示所有幻灯片以获取每个.text的真实高度
• 计算出所有.text中的最大高度值
• 将该最大值设置为所有.text的最小高度
• 恢复原幻灯片显示状态，保证用户体验不受影响
• 幻灯片切换、窗口尺寸变化时重新计算高度，适配响应式场景

修改后的完整代码 #

JavaScript 部分

var slideIndex = 1;

// 计算并设置所有文本容器的等高高度
function setEqualTextHeights() {
  var slides = document.getElementsByClassName("mySlides");
  var textElements = document.getElementsByClassName("text");
  var maxHeight = 0;
  var activeSlideIndex = slideIndex - 1;

  // 临时显示所有幻灯片以获取真实高度
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "block";
  }

  // 找到最高的文本容器高度
  for (var j = 0; j < textElements.length; j++) {
    var currentHeight = textElements[j].offsetHeight;
    if (currentHeight > maxHeight) {
      maxHeight = currentHeight;
    }
  }

  // 设置所有文本容器高度为最大值
  for (var k = 0; k < textElements.length; k++) {
    textElements[k].style.minHeight = maxHeight + "px";
  }

  // 恢复原幻灯片显示状态
  for (var l = 0; l < slides.length; l++) {
    slides[l].style.display = "none";
  }
  slides[activeSlideIndex].style.display = "block";
}

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1;}    
  if (n < 1) {slideIndex = slides.length;}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  
  // 每次切换幻灯片后重新计算高度
  setEqualTextHeights();
}

// 页面加载时初始化高度
window.onload = function() {
  showSlides(slideIndex);
  setEqualTextHeights();
};

// 窗口大小改变时重新计算高度
window.onresize = function() {
  setEqualTextHeights();
};

CSS 部分（调整.text默认样式）

.text {
  color: #333333;
  text-align: left;
  font-family: "Assistant", sans-serif;
  font-style: normal;
  font-weight: 400;
  padding: 1vh 0 0 0;
  /* 移除原flex-grow属性，改用JS控制高度 */
}

HTML 部分（保持不变）

<div class="slideshow-container">
<div class="mySlides">
<div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image">  <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a></div>
<div class="heading">Lorem ipsum</div>
<div class="text">But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.</div>
</div>
<div class="mySlides">
<div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image">  <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a></div>
<div class="heading">Lorem ipsum</div>
<div class="text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
</div>
<div class="mySlides">
<div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image">  <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a></div>
<div class="heading">Lorem ipsum</div>
<div class="text">But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated</div>
</div>
</div>
<div class="dot-container">
<div class="dot" onclick="currentSlide(1)"></div>
<div class="dot" onclick="currentSlide(2)"></div>
<div class="dot" onclick="currentSlide(3)"></div>
</div>

方案说明 #

• 使用min-height而非固定height，确保文本内容动态变化时仍能正常展开
• 临时显示幻灯片的过程用户无感知，不影响交互体验
• 窗口 resize 时自动重新计算，完美适配各种响应式场景

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