Html 如何使用具有元素高度的 CSS calc()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33776171/
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
How to use CSS calc() with an element's height
提问by Luciano
I was studying ways to make a hexagon with just CSS, and found a solution that gives me regular hexagons based on the width:
我正在研究仅用 CSS 制作六边形的方法，并找到了一个解决方案，可以根据宽度为我提供正六边形：
.hexagon {
height: 100%;
width: calc(100% * 0.57735);
display: inline-block;
}
However, the code works by generating new rectangles based on the parent element's width. I was searching for a way to calculate the width based on the parent's height.
但是，代码的工作原理是根据父元素的宽度生成新的矩形。我正在寻找一种根据父母的身高计算宽度的方法。
Is there a way to use an element's height property instead of width for calc()? (I'm not looking into using vhsince the nearest parent won't always be the viewport). I googled around and could not find an answer.
有没有办法使用元素的高度属性而不是宽度calc()？（我没有考虑使用，vh因为最近的父级并不总是视口）。我用谷歌搜索并找不到答案。
回答by YAMAN
I think you are trying to run script in a css syntax, which is NOT POSSIBLE.
我认为您正在尝试以 css 语法运行脚本，这是不可能的。
calc() can do basic math operation with absolute values, it cannot find the height of an element and then perform math on it.
calc() 可以使用绝对值进行基本的数学运算，它无法找到元素的高度，然后对其进行数学运算。
回答by Alejandro Lora
It is not possibleas @YAMAN said but I have a trick to share with you just in case it works and help you.
正如@YAMAN 所说，这是不可能的，但我有一个技巧可以与您分享，以防万一它起作用并帮助您。
top: calc(50% - 0.59em);
To test it, given a div with a size and a text inside, you can increase the font size, get manually the height and divide it by 2, replace the 0.59em by that value and you will probably see that they stays in the same px.
为了测试它，给定一个带有大小和文本的 div，您可以增加字体大小，手动获取高度并将其除以 2，用该值替换 0.59em，您可能会看到它们保持不变像素。
Notice that I already know that this is not 100% precise, but it does work quite decent for few scenarios, check it out for you, might suit your case or might not.
请注意，我已经知道这不是 100% 精确，但它在少数情况下确实工作得很好，请为您检查一下，可能适合您的情况，也可能不适合。
回答by Carles Alcolea
You can circumvent the problem using an intermediary: CSS variables, which is the only data "outside" the curly brackets, as it were.
您可以使用中介来规避这个问题：CSS variables，它是大括号“外部”的唯一数据，就像它一样。
If the parent's width is also dynamic or dependant on other value, use another var for that. Just as an example so you can see the syntaxis, it'd look something like this:
如果父级的宽度也是动态的或依赖于其他值，请为此使用另一个 var。作为一个例子，你可以看到语法，它看起来像这样：
:root {
--hex-parent-height: 10px;
}
.hexagon.parent {
/* ... */
width: var(--hex-parent-height);
}
.hexagon {
height: 100%;
width: calc(100% * var(--hex-parent-height));
display: inline-block;
}
CSS Variables have two types of scopes: global and local. Local vars will only work logically within the same selector, but global vars are the same through all your CSS. Declaring one or more variables globally is done through the root block, as shown in the code example.
CSS 变量有两种类型的作用域：全局和局部。局部变量只会在同一个选择器中逻辑地工作，但全局变量在你的所有 CSS 中都是相同的。全局声明一个或多个变量是通过根块完成的，如代码示例所示。
Retrieving a var value as you can see is as easy as using the var() CSS function, which in case you don't know, has a very nice fallback feature.
如您所见，检索 var 值就像使用 var() CSS 函数一样简单，如果您不知道，它有一个非常好的回退功能。
For example, if you were to set --hex-parent-heightdynamically and something goes wrong and the var is left unset, you may insert a default value to minimize the damages, like so: var(--hex-parent-height, 10px)
例如，如果您要--hex-parent-height动态设置并且出现问题并且 var 未设置，您可以插入一个默认值以最小化损害，如下所示：var(--hex-parent-height, 10px)
回答by Antonio Capani
I suggest to define a css rule which depends on a css var (as proposed by Carles Alcolea) and implement a javascript code which updates the value of the css var.
我建议定义一个依赖于 css var 的 css 规则（由 Carles Alcolea 提出）并实现一个 javascript 代码来更新 css var 的值。
- Define css which uses var()
- 定义使用 var() 的 css
.hexagon.parent {
/* ... */
width: var(--hex-parent-height);
}
- Create a placeholder within the html to hold var(s) definition
- 在 html 中创建一个占位符来保存 var(s) 定义
<style id="my-dyn-css">
/* dynamically define css vars here */
</style>
- Define a function to set and update the values of the vars (for example on window resize)
- 定义一个函数来设置和更新变量的值（例如调整窗口大小）
function updateDynCss() {
var parentHeight = computeHeight();
var style = ":root{--hex-parent-height:" + parentHeight + "px;}";
$("#my-dyn-css").empty().html(style);
}
