Calc() 输出意外值

Question

我想做的是通过 calc(var(--grid-item-width) * 1.6) 使 #grid height 成为 #grid width 的 160%，但看起来 --grid-item-width 被视为视口宽度的百分比而不是像素值。

#grid 的高度远远大于其宽度的 160%，如下面的屏幕截图所示。

:root {
  --gap: 26px;
  --grid-item-width: calc(100% - calc(var(--gap) * 4));
}

#grid {
  width: 100%;
  height: var(--grid-item-width); /* does not match */
  overflow-x: auto;
  display: grid;
  grid-gap: var(--gap);
  grid-auto-flow: column;
  grid-auto-columns: var(--grid-item-width); /* does not match */
}

当我将 --grid-item-width 的值打印到控制台时，它 returns calc(100% - calc( 26px * 4))，这显然没有帮助。

MDN 上关于 calc() 的注释之一指出：

Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.

这就是为什么 calc(var(--grid-item-width) * 1.6) 在这种情况下有意外输出的原因吗？

Answer 1

两个表达式相同，但它们不会解析为相同的值，因为它们应用于不同的端口。

因此，将 calc(100% - calc(var(--gap) * 4)) 与 height 一起使用意味着我们采用 100% 的父级高度 （包含块）并删除 4 个间隙。

将 calc(100% - calc(var(--gap) * 4)) 与 grid-auto-columns 结合使用意味着我们采用 100% 的元素宽度 并移除 4 个间隙。如果您的元素是代码中的唯一元素，那么它将是全屏宽度，因此您将结束使用屏幕宽度。

获得相同值的唯一方法是确保父元素的高度与元素的宽度相同，或者避免使用百分比值并依赖于在两种情况下解析方式相同的不同单位(px,vw,vh,em,等等)

请注意，如果有 no height set on the parent element.

，与高度一起使用的值可能无法达到 auto

Calc() 输出意外值

Calc() outputting unexpected value

css

css-grid

css-calc