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-container 的高度，但我想把它放在一个高度可变的流体网格中。有什么办法可以实现这一点吗？

Answer 1

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

Answer 2

您可以使用 jquery 来使用它：

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

这将调整“slide-container”div 的大小，使其与“slide”div 具有相同的高度。

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

   $(window).resize(sliderheight);

希望这会有所帮助。

Answer 3

执行此操作的完美方法是设置相对父级的尺寸，即高度和高度。宽度以适合绝对子项。

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

这家伙写的足以理解CSS定位的基础知识。实际上，相对父级用于逻辑定位其所有绝对子级。但它不共享物理位置，因此它不会伸展自己以覆盖相对的孩子。