Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/38.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使用百分比作为CSS calc()的乘数_Css_Css Variables_Css Calc - Fatal编程技术网

使用百分比作为CSS calc()的乘数

使用百分比作为CSS calc()的乘数,css,css-variables,css-calc,Css,Css Variables,Css Calc,假设我定义了一个CSS变量--half等于50% :根目录{ --一半:50%; } 然后我可以将某物的宽度设置为50%,如下所示: .partial{ 宽度:var(--一半); } 到目前为止还不错。假设我有一个高的元素,我想垂直填充视口: .toll{ 高度:100vh; } 太好了。最后,如果使用了partial,我希望我的toll元素只填充垂直空间的一半(即50vh)。所以我试了一下: .toll.partial{ 高度:计算(100vh*var(-一半)); } 哎呀,这似乎

假设我定义了一个CSS变量
--half
等于
50%

:根目录{
--一半:50%;
}
然后我可以将某物的
宽度设置为
50%
,如下所示:

.partial{
宽度:var(--一半);
}
到目前为止还不错。假设我有一个
高的
元素,我想垂直填充视口:

.toll{
高度:100vh;
}
太好了。最后,如果使用了
partial
,我希望我的
toll
元素只填充垂直空间的一半(即
50vh
)。所以我试了一下:

.toll.partial{
高度:计算(100vh*var(-一半));
}
哎呀,这似乎不起作用。如果我将
--half
重新定义为等于
0.50
,它确实有效:

:根目录{
--半数:0.50;
}
但是,我上面的
width
设置无法单独使用变量

问题A部分:如何在CSS
calc()
表达式中使用
XX%
名称,并将其解释为作为乘法因子的百分比值

问题B部分:如果无法做到这一点,是否有一种方法可以根据实际值定义百分比值,或者反过来定义百分比值,例如以下虚构的定义?(我不希望定义重复的“镜像”值,一个是百分比值,一个是小数点值。)

:根目录{
--半因子:0.50;
--一半:计算(var(半因子)*100)%;
}

如果我被迫定义两个单独的变量(问题的B部分),那么我似乎可以这样做:

:根目录{
--半因子:0.50;
--一半:计算值(100%*var(半因子));
}

因此,这将使我的应用程序正常工作,并使值最终取决于一个值定义(此处为
--半因子
)。但是如果有一种方法可以用一个定义来完成两个用例,我很想知道它。(我知道我可以内联
calc(100%*var(半因子))
而不是使用
var(--half)
,但这不是我所说的“单一定义”的意思。

将单位视为一个变量,你可以像下面这样做:

:根目录{
--季度:25 ;;
--半数:50 ;;
--四分之三:75;
}
* {
--R季度:计算(var(--quarter)*var(--u,1%);
--半R:calc(var(--half)*var(--u,1%);
--三季度-R:计算(var(-三季度)*var(-u,1%);
}
.盒子{
高度:50px;
背景:红色;
保证金:5px;
宽度:var(--half-R);
}


是的,这也是我能想到的最好的办法:;虽然我自己的方法是基于多个变量一起使用来确定最终的尺寸),但乘以宽度百分比是没有意义的。结果单位是多少?50vh%?您考虑的是CSS百分比单位。我想乘以百分比值,它是无单位的;也就是说,50%等于0.50%。它们是相同值的不同表示形式。所以也许这就是问题所在;CSS将百分比视为一种单位类型,我尝试在表达式中已经有单位的情况下使用无量纲值。