如何使用CSS calc()与元素的高度

Question

我正在研究用CSS制作六边形的方法,并找到了一个基于宽度给出正六边形的解决方案:

.hexagon {
  height: 100%;
  width: calc(100% * 0.57735);
  display: inline-block;
}

但是,代码的工作原理是根据父元素的宽度生成新的矩形.我正在寻找一种根据父母身高计算宽度的方法.

有没有办法使用元素的高度属性而不是宽度calc()？(我不打算使用,vh因为最近的父节点并不总是视口).我用Google搜索,无法找到答案.

Answer 1

我认为你试图用css语法运行脚本,这是不可能的.

calc()可以使用绝对值进行基本的数学运算,它无法找到元素的高度,然后对其执行数学运算.

如果您找到了解决方案,请告诉我.这会有很大帮助

干杯!!

Answer 2

您可以使用中介来规避这个问题：CSS variables，它是大括号“外部”的唯一数据，就像它一样。

如果父级的宽度也是动态的或依赖于其他值，请为此使用另一个 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 变量有两种类型的作用域：全局和局部。局部变量只会在同一个选择器中逻辑地工作，但全局变量在你的所有 CSS 中都是相同的。全局声明一个或多个变量是通过根块完成的，如代码示例所示。

如您所见，检索 var 值就像使用 var() CSS 函数一样简单，如果您不知道，它有一个非常好的回退功能。

例如，如果您要--hex-parent-height动态设置并且出现问题并且 var 未设置，您可以插入一个默认值以最小化损害，如下所示：var(--hex-parent-height, 10px)

Answer 3

正如@YAMAN 所说，这是不可能的，但我有一个技巧可以与您分享，以防万一它有效并帮助您。

top: calc(50% - 0.59em);

为了测试它，给定一个具有大小和内部文本的 div，您可以增加字体大小，手动获取高度并将其除以 2，用该值替换 0.59em，您可能会看到它们保持相同像素。

请注意，我已经知道这不是 100% 精确，但它在少数情况下确实工作得相当不错，为您检查一下，可能适合您的情况，也可能不适合。