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

【问题标题】：Can I calculate and use element height with SASS \ Compass我可以用 SASS \ Compass 计算和使用元素高度吗
【发布时间】：2013-03-20 21:10:35
【问题描述】：

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

【问题讨论】：

标签： css sass compass-sass

【解决方案1】：

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

为什么要应用等于元素高度一半的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

更新 2013-04-16

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

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

【讨论】：

谢谢！你是对的 - 我专注于解决原始任务的一种方式 - 但忘记了其他方式:-) 你的解决方案非常好。
嘿dizpers，我刚刚证明自己是错的，请参阅更新后的答案。
@Andrey'lolmaus'Mikhaylov 如果需要，您可以创建一个纯 CSS 的方形容器。 See #3

【解决方案2】：

我找到了一个很好的方法。它正在使用transform: translate(-50%, -50%)

这里有一个详细说明解决方案的链接：Centering element

【讨论】：

正是我需要的，也适用于 IE-9（带 -ms- 前缀）

【解决方案3】：

试试这个：

@mixin flexible-top($elementHeight) {
    top: ($elementHeight / (-2));
}

.yourElement {
    @include flexible-top(yourElementHeight); 
}

【讨论】：

未指定元素高度。我需要以某种方式获取元素高度。我现在有 javascript 解决方案，但正在寻找 css \ scss 方式。
我可以告诉你，用 css 获取元素的高度值是不可能的，所以除了 javascript 之外别无选择 :)
user1479606，你是正确的，高度在 CSS 中是未知的，但你错了，除了 Javascript 没有其他选择。 Javascript不是答案！ :D 大部分类似的问题都可以用纯 CSS 解决，这个也不例外。

【解决方案4】：

不使用绝对位置的替代解决方案：
就我而言，我不能使用绝对位置，因为它会弄乱使用显示 flex 的子元素。我能够做的是让我的包装器在我想要垂直居中的空间中具有 100% 的高度。注意：我的子元素已经水平居中。

前提条件：
为了使此解决方案起作用，包装器在您要垂直居中的空间中必须具有 100% 的高度。例如，我希望它相对于窗口高度垂直居中，因此包装器必须与窗口高度相同。

结构：

<div class="elements-wrapper">
  <div class="element"> <!-- in my case, this is a container -->
    <!-- in my case, x numbers of display flex elements here-->
  </div>
</div>

包装器高度为 100%，向下平移 50%。

.elements-wrapper {
  height: 100%;
  transform: translate(0, 50%);
}

然后，将元素向上平移 50%。

.element {
  transform: translate(0, -50%);
}

有了这个，元素可以是任意大小，你不必每次都弄乱 CSS，比如在我的例子中，通过添加子元素来改变大小。

*有一个问题，我的元素包装器在向下移动的 50% 中阻塞了指针事件，所以我通过添加这些规则来解决这个问题：

.elements-wrapper {
  pointer-events: none;
}
.element{
  pointer-events: initial;
}

【讨论】：