CSS中是否有一种方法可以将某些东西定位为其自身高度的百分比？

Question

我想要的是一个儿童div，其中有60％的东西悬挂在父母的底部。我想使用类似的东西：

sudo su -

我不能使用.child { bottom: -60% * selfHeight; } 因为我还需要它来推倒下一个父兄弟。并且transform: translateY(60%);不会这样做。

有没有办法实现这一目标（跨浏览器，IE11 +，Safari（iOS /桌面），Chrome，FF）？

Answer 1

此案例可以使用透明图像。看看我的snippet on jsfiddle.net。

<div class="imgdiv">
  <img id="imgid" src="http://www.21tech.ir/wp-content/uploads/nc-efi-placeholder-180x180.png">
  <img src="http://www.dl.21tech.ir/img-upload/2016/12/95091702.jpg">
</div>



.imgdiv {
  width: 50%;
  height: auto;
  height: 50px;
  background-color: #ef2121;
}

#imgid {
  width: 100%
}

如果您调整窗口大小，您可以看到它是响应式的，但您可以使其稳定。