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 的高度，但我想将其放入可变高度的流式网格中。有没有什么方法可以实现这一点？

- Patrick Oscity

---

不幸的是，绝对定位的元素就是被放置在你告诉浏览器的位置上。这种定位方式会将元素从文档流中移除。为了让翻译更通俗易懂，我稍微调整了一下句子结构和措辞，但并没有改变原意。 - Stephen

那我猜手动设置高度可能是唯一的解决方案，对吗？ - Patrick Oscity

还有其他方法可以将.slide叠放在彼此之上，而不使用position: absolute;吗？ - Patrick Oscity

现在是否有比我们现有的答案更现代化的解决方案？ - JCollier

Answer 1

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

- Diodeus - James MacFarlane

Answer 2

您可以使用jQuery来实现此功能：

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

这将调整'slide-container' div的高度使其与'slide' div相同。

您可以通过在'resize'事件触发时调用该函数来使其响应式：

   $(window).resize(sliderheight);

希望这能帮到你。

- Charlie Tupman

Answer 3

最佳的做法是将相对父元素的尺寸即高度和宽度设置为适应绝对子元素。

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

这个人写了足够的内容来理解 CSS 定位的基础知识。实际上，相对定位父元素用于逻辑地定位其所有绝对定位的子元素。但它不共享物理位置，因此它不会拉伸自己以覆盖相对定位的子元素。

- SouravOrii