Html 如何让文本确定绝对定位div的高度

我有一个滑块（Cycle2），它充满了文本。每个幻灯片都定位为：绝对；因为幻灯片需要相互重叠。所以位置：相对；这不管用

第一张幻灯片中文本的长度决定了每张幻灯片的高度。因此，如果第二张幻灯片上的文本比第一张幻灯片上的文本长，则第二张幻灯片上的文本不会完全显示。这是课文的中断

有一种明显：隐藏；在Cycle2插件中的行，所以我将其设置为“可见”。这是可行的，但不会改变每个幻灯片的高度。因此，结果是较长的文本将开始溢出到它下面的元素上（因为位置：absolute；）。我不想使用绝对定位，但这似乎是唯一的方法

有没有办法让文本决定每张幻灯片的高度。如果没有，我的滑块是否可以只取所有幻灯片中最高幻灯片的高度

我几乎不可能在JSFIDLE中实现这一点。这是每张幻灯片的html。正如你所知，它是在液体环境中建造的

<div class="testimonial-slide">
 
    <div class="testimonial-slide-header">
      
        <div class="testimonial-slide-img">
            {% if testimonial_voor_slider.klant_foto_logo.src contains '.png' %}
    {% assign pngKlant = true %}
   {% else %}
    {% assign pngKlant = false %}
   {% endif %}
      
      {%- include 'includes/image/image',
      imageSource: testimonial_voor_slider.klant_foto_logo,
      imageLink: ,
      imageAlt: image.alt,
      imageClass: 'klant-logo-slide',
      imageSizes: '$-12-100px|md-4-100%|lg-6-100%',
      imageMode: 'fit',
      imageBoxed: false,
      imageLazyload: true,
      imagePng: pngKlant,
      -%}  
        </div>
        
        <div class="testimonial-slide-titles">
    <h3>{{testimonial_voor_slider.klant_naam}}</h3>
    <h4>{{testimonial_voor_slider.klant_bedrijfsnaam}}</h4>
        </div>
        
</div>
    
  <p>{{testimonial_voor_slider.testimonial_tekst}}</p> 
  
</div>
    

{%如果证明文件\u voor\u slider.klant\u foto\u logo.src包含“.png”}
{%assign pngKlant=true%}
{%else%}
{%assign pngKlant=false%}
{%endif%}
{%-include'includes/image/image'，
图片来源：证明性的voor滑动条.klant foto标志，
imageLink:，
imageAlt:image.alt，
imageClass:“klant徽标幻灯片”，
图像大小：'$-12-100px | md-4-100%| lg-6-100%'，
imageMode:'适合'，
图像框：错误，
imageLazyload：对，
图片PNG:pngKlant，
-%}  
{{{推荐书{voor{u slider.klant{u naam}}
{{{推荐书{voor{u slider.klant{u bedrijfsnaam}}
{{estimational_voor_slider.estimational_tekst}}

以下是围绕这些幻灯片的容器代码：

{% assign slider_class = slider_class | plus: 1 %}

<div class="{% if testimonial_slider.kleurstelling == 'licht' %} testimonial-light {% else %} {% endif %}  {{slider_class}} cycle-slideshow testimonial-slider-container" data-cycle-fx="scrollHorz" data-cycle-slides="> div" data-cycle-prev=".cycle-prev-{{slider_class}}" data-cycle-next=".cycle-next-{{slider_class}}" data-cycle-timeout="0">   
    
    <span class="buttons-wrapper">
  <span class="cycle-prev cycle-prev-{{slider_class}}"> <i class="material-icons"> arrow_back </i></span> 
  <span class="cycle-next cycle-next-{{slider_class}}"> <i class="material-icons"> arrow_forward </i></span> 
</span> 
    
  {% for testimonial_voor_slider in testimonial_slider.testimonial_toevoegen %}
    {% include testimonial_voor_slider %}
  {% endfor %}
           
</div>

{%assign slider\u class=slider\u class | plus:1%}
箭背
向前箭头
{在推荐滑动条中推荐滑动条的百分比。推荐滑动条%}
{%include commential_voor_slider%}
{%endfor%}

Cycle2 js应用了一些内联样式。如果您希望看到它的运行：

只要循环到下一张幻灯片，你就会看到发生了什么

---

我真的希望你们能帮我：）

事实证明Cycle2有自己的解决方案。只需将数据循环自动高度=“calc”添加到滑块的容器div。现在，滑块将与最高的滑块一样高。很好