CSS：将相对定位的父对象拟合到绝对定位的子对象的高度

我正在尝试制作一个简单的幻灯片。到目前为止，基本标记如下所示：

<h1>My Slideshow</h1>

<p>This paragraph behaves as expected.</p>

<div class="slide-container">
  <div class="slide">
    <h2>First Slide</h2>
    <p>Some stuff on this slide…</p>
  </div>

  <div class="slide">
    <h2>Second Slide</h2>
    <p>And some more stuff here…</p>
  </div>
</div>

<p>This paragraph will disappear beneath the stacked images.</p>

问题是，

.slide容器

与其子对象的高度不匹配（请参见屏幕截图）

---

我知道我可以手动设置

.slide容器的高度，但我想将其放在流体网格中，其中高度是可变的。有什么方法可以做到这一点吗？
绝对定位的项目在逻辑上与其父项关联，而不是“物理”关联。它们不是布局的一部分，因此父项无法真正看到它们有多大。您需要自己编写大小代码，或者使用JavaScript嗅探大小并在运行时进行设置。
您可以使用jquery：

    function sliderheight(){
        divHeight = $('.slide').height();
        $('.slide-container').css({'height' : divHeight});
    }
    sliderheight();

这将调整“幻灯片容器”div的大小，使其与“幻灯片”div具有相同的高度

您可以通过在触发“调整大小”事件时调用函数使其响应：

   $(window).resize(sliderheight);

希望这能有所帮助。
完美的方法是设置相对父对象的尺寸，即高度和宽度，以适合绝对子对象




这家伙写了足够多的东西来理解css定位的基础知识。实际上，相对父级用于逻辑定位其所有绝对子级。但它不共享物理位置，因此它不会拉伸自身以覆盖相对的子元素。
不幸的是，绝对定位元素只是：绝对定位在您告诉浏览器放置它的位置。这种定位会将元素从文档流中移除。因此，我想手动设置高度是唯一的解决方案，对吗？或者是否有另一种方法来堆叠
。将
滑动到彼此的顶部，而不使用
位置：绝对？
   $(window).resize(sliderheight);