<html>
<body>
<div></div> 
</body>
</html>
:root { 
    --scrollbar-width: calc(100vw - 100%);
}

body, html {
    width: 100%;
    height: 100%;
  margin: 0px;
}

div {
    background-image: url(http://i.stack.imgur.com/r5CAq.jpg);  
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

Ширина и высота элемента div относятся к той же пользовательской переменной CSS (- scrollbar-width), но ее ширина и высота в браузере разные. Это почему??

0
Fred Fredonando 20 Ноя 2021 в 14:51
3
Потому что процентное соотношение не будет разрешено таким же образом .. расчет выполняется не внутри переменной, а внутри свойства
 – 
Temani Afif
20 Ноя 2021 в 14:56
Мои сомнения разрешены. Большое тебе спасибо.
 – 
Fred Fredonando
21 Ноя 2021 в 13:06

1 ответ

Лучший ответ

Как уже было сказано в первом комментарии. Расчет выполняется не внутри определения, а внутри свойства.

Это приводит к следующему:

height: var(--scrollbar-width); равно height: calc(100vw - 100%);, где 100% вычисляется относительно высоты элемента. В то время как width: var(--scrollbar-width); или width: calc(100vw - 100%); приведет к вычислению, где 100% относительно ширины элемента.

По этой причине даже если вы ссылаетесь на одно и то же настраиваемое свойство, результаты для width и height разные.

0
Quentin Albert 20 Ноя 2021 в 15:27
Мои сомнения разрешены. Большое тебе спасибо.
 – 
Fred Fredonando
21 Ноя 2021 в 13:05