CSS:将相对定位父级与绝对定位子项的高度相匹配

Question

我正在尝试构建一个简单的幻灯片.到目前为止,基本标记看起来像这样:

<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>

这是相应的CSS:

.slide-container {
  position: relative;
}

.slide {
  position: absolute;
  top: 0;

  /* just for the looks */
  width: 20em;
  padding: 0 1em;
  border: 1px solid steelblue;
  background: white;
}

问题是,.slide-container它不适合其孩子(或孩子)的身高.slide(见截图).

我知道我可以设置.slide-container手动的高度,但我想把它放在流体网格中,其中高度是可变的.有没有办法实现这个目标？

Answer 1

绝对定位的项目在逻辑上与其父项相关联,但不是"物理上".它们不是布局的一部分,因此父项无法真正看出它们有多大.您需要自己编写大小代码,或者使用JavaScript嗅探它并在运行时设置它.

Answer 2

您可以使用 jquery 来使用它：

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

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

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

   $(window).resize(sliderheight);

希望这可以帮助。