绝对定位的子元素和父元素高度都为0。

Question

这是一个常见问题，但我仍然没有找到解决办法。

.parent 是一个滑块，而 .child 是图片。 我需要将 .child 的高度（它是一个绝对定位的元素）传递给 .parent。

.parent 高度为 0px。有任何想法吗？

提前感谢。

<div class="parent">
   <img class="child"></div> 
</div>

.child {
  position: absolute; //It must be absolute , because slider works with this
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
}

- user6644024

---

你知道图片的尺寸或长宽比吗？ - Michael Coker

你能不能添加另一个<img>标签，它是相对定位但没有设置visibility属性？这样可以让隐藏的图片占据空间。 - Chris

@MichaelCoker 当然可以，图片应该是响应式的。 - user6644024

@Chris 我应该把它放在哪里？ - user6644024

@AroTonoyan 图像的尺寸或宽高比是多少？ - Michael Coker

Answer 1

如我在评论中提到的，您可以添加两个<img>元素。一个具有position: absolute - 正如您的应用程序所需，另一个则具有visibility: hidden但具有position: relative。

如果您不想混乱标记，您可以使用伪元素，例如:after或:before来执行类似的操作。但是，思路是相同的。

父级现在占据了图像的全部高度。这种解决方案可能适用于您的应用程序，也可能不适用，因为您的问题并不是非常清楚，但也许值得一试。

.parent {
  background: #AAA;
}

.child {
  position: absolute;
}

.child-hidden {
  visibility: hidden;
}

<div class="parent">
  <img class="child" src="http://www.extremekitcars.com/wp-content/uploads/2016/01/Sports-Cars.png">
  <img class="child-hidden" src="http://www.extremekitcars.com/wp-content/uploads/2016/01/Sports-Cars.png">
</div>

- Chris

---

它有效！:) 我在我的情况下进行了一些修改并完成了。谢谢，你救了我的一天! - user6644024

很高兴能帮忙！你想让我也发布另一种解决方案吗？它看起来更漂亮一些。 - Chris

谢谢您的评论。我使用了您的技巧，添加了另一个元素，但将其隐藏并设置为相对定位。现在我的父元素具有所需的高度，但绝对定位的子元素没有被破坏！ - Daniel Storch

Answer 2

既然您已经知道图像的尺寸，可以将高度除以宽度得到纵横比。然后将其作为垂直填充百分比应用于父级元素，这将使父元素响应式地匹配图像尺寸。

.child {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
}

.parent {
  border: 1px solid red;
  position: relative;
  padding-bottom: 39.86451277%; /* (765 / 1919) * 100 */
}

<div>some content</div>

<div class="parent">
   <img class="child" src="http://via.placeholder.com/1919x765"> 
</div>

<div>more content</div>

- Michael Coker

---

如果尺寸已知，这是一个相当不错的解决方案。 - Chris

Answer 3

如果子元素不是图片，而是一个高度未知（自适应）的 div，因为它需要容纳动态内容，那么可能的解决方案是什么？

- Firoj Siddiki