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

Question

我在我的RoR项目中使用了sass和指南针.我需要为top元素的CSS属性赋值,即元素高度除以-2.我能用SASS\Compass吗？

Answer 1

你似乎遇到了XY问题.您有一个要解决的任务,而不是向我们询问有关任务的问题,您会询问您尝试过但已经发现不合适的解决方案.

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

有一个简单的解决方案来实现这一点,甚至不需要SASS!(实际上,只要你不知道元素的高度,SASS就无法提供比CSS更多的帮助.)

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

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

要将元素向上推动50%的高度,请执行以下两个简单步骤:

1)将其包装完全推出容器:

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

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

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

而已!

当你这样做时margin-bottom: -50%,你实际上将元素拉到其包装器高度的50%.但是包装纸的高度等于元素的高度!

不要忘记申请position: relative容器,否则position: absolute将相对于窗口,而不是容器.

这是一个带有良好评论代码的演示:http://jsbin.com/uwunal/4/edit

UPD 2013-04-16

我刚才意识到这是假的.

在CSS中,顶部和底部边距的百分比是指容器的宽度.所以上面的例子只能起作用,因为容器是方形的.