Question

我猜这是浏览器问题！

但是它的有趣

下面，我有两种计算高度和分配高度的方法。

黑匣子正在使用css变量，并计算和分配箱子的高度。

:root {
--content-height: calc(var(--app-height) - var(--app-footer) - var(--app-footer));  
}
.black {
  height: var(--content-height);
}

为蓝色框分配了高度，而没有使用css变量，并且它有效，而黑色不起作用

.blue {
    height: calc(var(--app-height) - var(--app-footer) - var(--app-footer))
}

猜猜两者都可以以相同的方式工作吗？否

https://codepen.io/Anenth/pen/VVwpzp

只有 second 可以正常工作！检出以下代码

document.querySelector('body').style.setProperty('--app-height', "100px")

:root {
  --app-header: 20px;
  --app-footer: 20px;
  --app-height: 300px;
  --content-height: calc(var(--app-height) - var(--app-footer) - var(--app-footer));
}

.box {
  width: 50px;
  background: #000;
  margin: 20px;
  display:inline-block;
  vertical-align:top;
}

.box-with-calc-var {
  height: var(--content-height);
}

.box-without-calc-var {
  background: #00F;
  height: calc(var(--app-height) - var(--app-footer) - var(--app-footer));
}

<div class="box box-with-calc-var"></div>
<div class="box box-without-calc-var"></div>

从其他CSS变量得出结果时，CSS变量不变

0 个答案: