Calc () выводит неожиданное значение - PullRequest
Новая
       24

Calc () выводит неожиданное значение

1 голос
/ 18 марта 2019

Я хотел бы сделать #grid height 160% от #grid width через calc(var(--grid-item-width) * 1.6), но похоже, что --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 */
}

enter image description here

Когда я печатаю значение --grid-item-width в консоль, возвращается calc(100% - calc( 26px * 4)), что, очевидно, не помогает.

Одна из заметок о calc() о состояниях MDN:

Математические выражения, включающие проценты для ширины и высоты столбцов таблицы, групп столбцов таблицы, строк таблицы, групп строк таблицы и ячеек таблицы в таблицах автоматической и фиксированной разметки, могут обрабатываться так, как если бы была задана функция auto.

Поэтому calc(var(--grid-item-width) * 1.6) имеет неожиданный вывод в этой ситуации?

1 Ответ

2 голосов
/ 18 марта 2019

Оба выражения являются одинаковыми, НО они не будут преобразованы в одно и то же значение, поскольку они применяются к разным типам.

То есть использование calc(100% - calc(var(--gap) * 4)) с height означает, что мы берем 100% от родительской высоты (содержащий блок) и удаляем 4 пробела.

Использование calc(100% - calc(var(--gap) * 4)) с grid-auto-columns означает, что мы берем 100% ширины элемента и удаляем 4 пробела. Если ваш элемент является единственным в вашем коде, поэтому он будет иметь полную ширину экрана, поэтому вы перестанете использовать ширину экрана.

Единственный способ получить одно и то же значение - убедиться, что высота родительского элемента совпадает с шириной элемента ИЛИ не использовать процентное значение и полагаться на разные единицы измерения, которые будут разрешаться одинаково в обоих случаях (px, * * 1016, vh, em, и т.д.)

Обратите внимание, что значение, используемое с height, может не соответствовать auto в случае, если для родительского элемента высота не установлена.

...