CSS - 不知道父元素高度的情况下将绝对定位的元素放在父元素末尾？

Question

假设我们有这样的 HTML：

假设我们有这样的 HTML

。

<div class="at-end-holder">
   Lorem ipsum dolor sit amet...
  <img src="http://placehold.it/350x150" class="at-end">
</div>

我们希望图片的顶部边缘与其父元素的底部边缘贴合。

如果我们知道图片的高度（假设为150px），那么我们可以设置bottom: -150px。但是，如果我们不知道它的高度呢？

我不想使用JavaScript。我的意思是- 我不想用。

这里有一个游乐场。底部的情况看起来正好符合要求，但我假设我知道图像的高度。

- Adam Pietrasiak

---

你在这里想要实现什么？当然，你可以像Josh建议的那样使用top:100%，但是接下来的内容会不会出现问题呢？图片要么会重叠在上面，要么会被隐藏在下面... - CBroe

@CBroe 是的，那正是我所需要的。许多元素的顶部/底部都有某种曲线重叠在一起，我想避免编写每个元素高度的 CSS。 - Adam Pietrasiak

好的，没问题 :) 只是想确保您不会在这里遇到任何“不必要”的副作用... - CBroe

Answer 1

由于该元素是相对于父元素绝对定位的，因此您可以简单地使用top: 100％将其定位在父元素的底部边缘。

更新示例

.at-end-holder.example .at-end {
    top: 100%;
}

.at-end-holder {
  background-color: #ddd;
  position: relative;
  margin-bottom: 200px;
}
.at-end-holder .at-end {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
}

<div class="at-end-holder">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis vero veritatis, assumenda reiciendis vel voluptate, rem eaque, ut quisquam qui sit molestias omnis. Officia, illum repellat quasi eius, magni soluta?
  <img src="http://placehold.it/350x150" class="at-end">
</div>

<div class="at-end-holder example">
  <h1>THIS I NEED, BUT I DONT KNOW IMAGE HEIGHT</h1>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis vero veritatis, assumenda reiciendis vel voluptate, rem eaque, ut quisquam qui sit molestias omnis. Officia, illum repellat quasi eiusmagni soluta?
  <img src="http://placehold.it/350x150" class="at-end">
</div>

- Josh Crozier