css - 我可以用 SASS\Compass 计算和使用元素高度吗

Question

我在我的 RoR 元素中使用 sass 和 compass。我需要为元素的 top CSS 属性分配值，即元素高度除以 -2。我可以用 SASS\Compass 来做吗？

Answer 1

你似乎得到了 XY problem .您有一项任务要解决，而不是向我们询问任务，而是询问您尝试过但已经发现不合适的解决方案。

为什么要应用等于元素高度一半的 top 属性并取反？因为您想将绝对定位的元素向上移动其高度的一半。这是原始任务。

有一个简单的解决方案可以实现，甚至不需要 SASS! (实际上，只要您不知道元素的高度，SASS 就无法提供比 CSS 更多的帮助。)

我们需要一个额外的包装器:

<div class=container>
  <div class=elements-wrapper>
    <div class=element>
    </div>
  </div>
</div>

要将元素向上推到其高度的 50%，请执行两个简单的步骤:

1) 将其 wrapper 完全推出容器:

.elements-wrapper {
  position: absolute;
  bottom: 100%; }

2) 现在将元素向下拉到其高度的 50%:

.element {
  margin-bottom: -50%; }

就是这样!

当您执行 margin-bottom: -50% 时，您实际上将元素拉低了其 wrapper 高度的 50%。但是包装器的高度等于元素的高度!

不要忘记将 position: relative 应用于容器，否则 position: absolute 将相对于窗口，而不是容器。

这是一个演示，代码注释良好:http://jsbin.com/uwunal/4/edit

更新 2013-04-16

我刚刚意识到这是一个骗局。

在 CSS 中，上边距和下边距的百分比是指容器的宽度。所以上面的例子只适用于容器是方形的。