css - 边距顶部 : calc(%) is using percent of width rather than desired percent of height

Question

我使用类似 margin-top: calc(100% - $value) 的意图是计算将涉及 100% 的高度来计算上边距。但实际上是按宽度的100%计算。

有人知道如何根据百分比高度而不是宽度进行计算吗？ (到目前为止，我已经检查过 Chrome 和 FF 中是否都发生了不良行为)。

https://jsfiddle.net/bfxhebc3/

Answer 1

根据 css spec ，边距的百分比值，包括 margin-top，是基于/从包含 block 的宽度计算的。

如果你指的是窗口的高度，你可以使用 vh 而不是百分比:

margin-top: calc(100vh - $value);