html - CSS 相对最高百分比在 Chrome 中不起作用

Question

我想要地平线日出的效果。

我发现当父级的高度为auto时， 相对最高百分比的 child 在 Chrome 中不起作用。 但在 Firefox 中没问题。

案例可以简单的demo: https://jsfiddle.net/ja6Lngx4/

#A {
  position:relative;
  top:50%; left:50%;
}

---

<div style="width:200px;background:#aaa;">
<div id="A">123</div>
<div>ABC</div>
</div>

我知道如果指定了 parent 的高度， 百分比最高的将生效， 但也要求 parent 的高度必须适合内容。

我们只能通过 CSS 实现吗？ 还是必须用 Javascript 来做？

Answer 1

不，您只能在 Javascript 中执行此操作，因为 Chrome 不会更改布局计算优先级，即使子项的顶部不会影响父项的尺寸。顶部百分比被视为高度百分比。

在 Javascript 中，您可以使用 getBoundingClientRect() 获取父级相对于整个视口(viewport)的尺寸(以 px 为单位)，并使用该信息设置子级的动画。