CSS 我可以用 SASS \ Compass 计算和使用元素高度吗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15715574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I calculate and use element height with SASS \ Compass
提问by Dmitry Belaventsev
I use sass and compass in my RoR project. I need to assign to the topCSS property of an element the value, which is element height divide by -2. Can I do it with SASS \ Compass?
我在我的 RoR 项目中使用了 sass 和 compass。我需要为top元素的CSS 属性分配值，即元素高度除以 -2。我可以用 SASS \ Compass 来做吗？
回答by Andrey Mikhaylov - lolmaus
You seem to have got the XY problem. You have a task to solve, and instead of asking us about the task, you ask about a solution that you tried and already found inappropriate.
您似乎遇到了XY 问题。您有一个任务要解决，而不是向我们询问该任务，而是询问您尝试过但已经发现不合适的解决方案。
Why do you want to apply the topproperty equal to half of element's height and negated? Because you want to move an absolutely positioned element half its height up. This is the original task.
为什么要应用top等于元素高度一半的属性并取反？因为您想将绝对定位的元素向上移动其高度的一半。这是最初的任务。
There's a simple solution to achieve that, and SASS is not even necessary! (Actually, as long as you don't know element's height, SASS can't provide more help than CSS.)
有一个简单的解决方案可以实现这一点，甚至不需要 SASS！（实际上，只要不知道元素的高度，SASS 就不能提供比 CSS 更多的帮助。）
We'll need an extra wrapper:
我们需要一个额外的包装器：
<div class=container>
<div class=elements-wrapper>
<div class=element>
</div>
</div>
</div>
To push the element up for 50% of its height, do two simple steps:
要将元素向上推至其高度的 50%，请执行两个简单的步骤：
1) Push its wrapper up fully out of the container:
1) 将包装纸完全推出容器：
.elements-wrapper {
position: absolute;
bottom: 100%; }
2) Now pull the element down for 50% of its height:
2) 现在将元素下拉至其高度的 50%：
.element {
margin-bottom: -50%; }
That's it!
就是这样！
When you do margin-bottom: -50%, you actually pull the element 50% down of its wrapper'sheight. But the wrapper's height it equal to the element's height!
当您这样做时margin-bottom: -50%，您实际上将元素拉低了其包装器高度的50% 。但是包装器的高度等于元素的高度！
Don't forget to apply position: relativeto the container, otherwise position: absolutewill relative to the window, not the container.
不要忘记应用于position: relative容器，否则position: absolute将相对于窗口，而不是容器。
Here's a demowith well-commented code: http://jsbin.com/uwunal/4/edit
这是一个带有注释良好的代码的演示：http: //jsbin.com/uwunal/4/edit
UPD 2013-04-16
UPD 2013-04-16
I've just realised that this is a phony.
我才意识到这是一个骗子。
In CSS the percentages of top and bottom margins refer to the widthof the container. So the above example only works because the container is square.
在 CSS 中，顶部和底部边距的百分比指的是容器的宽度。所以上面的例子只适用于容器是方形的。
回答by pdiddy
I have found a good way of doing this. It is using the transform: translate(-50%, -50%)
我找到了一个很好的方法来做到这一点。它正在使用transform: translate(-50%, -50%)
here a link detailing the solution : Centering element
这里有一个详细说明解决方案的链接：居中元素
回答by Eli
Try this:
尝试这个：
@mixin flexible-top($elementHeight) {
top: ($elementHeight / (-2));
}
.yourElement {
@include flexible-top(yourElementHeight);
}
回答by reddtoric
Alternative solution that doesn't use position absolute:
In my case, I couldn't use position absolute because it messes up the children elements that uses display flex. What I was able to do was have my wrapper have a height of 100% in the space I want vertically centered. Note: my children elements are already horizontally centered.
不使用绝对位置的替代解决方案：
在我的情况下，我不能使用绝对位置，因为它弄乱了使用 display flex 的子元素。我能够做的是让我的包装纸在我想要垂直居中的空间中具有 100% 的高度。注意：我的孩子元素已经水平居中。
Precondition:
In order for this solution to work, the wrapper must have a height of 100% in the space you want to center vertically. For example, I want it vertically centered in relation to the window height, so the wrapper has to be the same as the window height.
前提条件：
为了使此解决方案起作用，包装纸必须在要垂直居中的空间中具有 100% 的高度。例如，我希望它相对于窗口高度垂直居中，因此包装器必须与窗口高度相同。
Structure:
结构：
<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>
With the wrapper at a height of 100%, translate it 50% down.
包装纸高度为 100%，向下平移 50%。
.elements-wrapper {
height: 100%;
transform: translate(0, 50%);
}
And then, translate the element 50% up.
然后，将元素向上平移 50%。
.element {
transform: translate(0, -50%);
}
With this, the element can be any size and you don't have to mess with the CSS every time like when, in my case, changing the size by adding children elements to it.
有了这个，元素可以是任何大小，你不必每次都弄乱 CSS，就像在我的情况下，通过向它添加子元素来改变大小。
*Had a problem where my element-wrapper was blocking pointer events in the 50% that was shifted down so I fixed that by adding these rules:
*有一个问题，我的元素包装器阻止了向下移动的 50% 中的指针事件，所以我通过添加这些规则来解决这个问题：
.elements-wrapper {
pointer-events: none;
}
.element{
pointer-events: initial;
}
