如何将 CSS calc() 与元素的高度一起使用答案

【问题标题】：How to use CSS calc() with an element's height如何将 CSS calc() 与元素的高度一起使用
【发布时间】：2016-02-19 23:01:20
【问题描述】：

我正在研究仅使用 CSS 制作六边形的方法，并找到了一个根据宽度为我提供常规六边形的解决方案：

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

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

有没有办法为calc() 使用元素的高度属性而不是宽度？（我不打算使用vh，因为最近的父级并不总是视口）。我搜索了一下，找不到答案。

【问题讨论】：

您是否考虑过使用 Sass 或 Less？
@RafaRomero：如果他或她这样做了，你会建议什么解决方案？它对这个问题有什么帮助？
@RafaRomero 我想知道是否有没有 SASS 或 LESS 的简单方法，但写下你的答案，可能会有所帮助。
calc() 不使用任何东西的宽度，它只是由运算符在左侧和右侧之间进行简单的操作。 .所以在相对值的情况下（比如这里100%），它首先将该值转换为绝对值。您不能传递另一个元素的相对值，也不能传递其他预操作 btw...
@dakab 我问它是因为首先我想知道他/她是否想使用其他技术

标签： html css

【解决方案1】：

我认为您正在尝试以 css 语法运行脚本，这是不可能。

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

【讨论】：

这样做的替代方法是什么？

【解决方案2】：

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

top: calc(50% - 0.59em);

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

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

【讨论】：

不要使用任何边距

【解决方案3】：

您可以使用中介来规避该问题：CSS 变量，它是大括号“外部”的唯一数据。

如果父级的宽度也是动态的或依赖于其他值，请为此使用另一个 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)

【讨论】：

是的，但这些仍然取决于在 :root 设置的固定值。不幸的是，它不可能使用动态值，所以我放弃了它......也许有一天我们会拥有它！
除非你可以从jscss-tricks.com/updating-a-css-variable-with-javascript更新css变量
我原本不喜欢这个答案（如果我们使用 JS，为什么不只在 JS 中做所有事情？），但我改变了主意 - 使用 JS 设置 CSS 变量允许我们在 CSS 中进行所有“其他”计算，从而简化了布局/动画的其余部分。

【解决方案4】：

我建议定义一个依赖于 css var 的 css 规则（由 Carles Alcolea 提出）并实现一个更新 css var 值的 javascript 代码。

定义使用 var() 的 css

.hexagon.parent {
  /* ... */
  width: var(--hex-parent-height);
}

在 html 中创建一个占位符来保存 var(s) 定义

<style id="my-dyn-css">
/* dynamically define css vars here */
</style>

定义一个函数来设置和更新变量的值（例如在调整窗口大小时）

function updateDynCss() {
  var parentHeight = computeHeight();
  var style = ":root{--hex-parent-height:" + parentHeight + "px;}";
  $("#my-dyn-css").empty().html(style);
}

【讨论】：

为什么要这么复杂？还不如直接用js更新样式
你说得对，卢西亚诺，这不是绝对必要的。但它有助于代码的可读性和可重用性（您可以在其他 css 声明中重用 var）。例如，我使用这种方法来定义包含主颜色变化的变量。

【解决方案5】：

正如许多人多次指出的那样，使用纯 CSS 无法根据 100% 高度设置宽度。

如果您知道或可以计算出纵横比，那么您在技术上就知道宽度，并且可以相当容易地计算出来。

.wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 or widescreen aspect ratio */
}
.hexagon {
    top: 0;
    position: absolute;
    width: calc(100% * 9 / 16); /* or simply 56.25%; */
}

如果纵横比未知，那么使用 CSS 的唯一可行解决方案是使用 px 或 em 值设置父元素的高度（或最小高度）。这些也可以使用 CSS 变量进行设置，尽管一些旧版浏览器不完全支持 CSS 变量。

.wrapper {
    min-height: 400px;
}
.hexagon {
    width: calc(400px * 0.57735);
}

最后，如果高度是完全动态的，例如它会根据文本的行数而变化，那么宽度将需要使用 javascript 来计算。

// Example using jQuery, but the principles should be the same.
jQuery(function($){
    var hexagon = $('.hexagon');
    // Resizing the document may change the height of the parent element.
    $(window).on('resize', function() {
        hexagon.each(function(){
            // We'll remove the existing width before calling parent.height()
            $(this).css({width:''}).css({width:$(this).parent().height()});
        });
    }).trigger('resize');
});

请注意，如果父元素的大小在子元素更改时发生更改，则 javascript 解决方案可能无法提供您正在寻找的确切结果。这也是在 CSS 中使用高度值的挑战的一部分，以及为什么几乎所有内容都基于宽度。

【讨论】：