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();

这将调整＆＃39; slide-container＆＃39; div与＆＃39; slide＆＃39;具有相同的高度。格。

你可以通过调用一个＆＃39;调整大小的功能来使其响应。事件：

   $(window).resize(sliderheight);

希望这有帮助。

Answer 3

这样做的完美方法是设置相对父母的尺寸，即身高和尺寸。宽度适合绝对的孩子。

http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/

这家伙写得足以了解css定位的基础知识。实际上，相对父级用于逻辑地定位其所有绝对子级。但它并没有分享身体的位置，因此它不能伸展自己来覆盖相关的孩子。