Html CSS3`calc`变量是否可以全局共享？_Html_Css

Html CSS3`calc`变量是否可以全局共享？

html css

Html CSS3`calc`变量是否可以全局共享？,html,css,Html,Css,在CSS3中有没有办法创建一个全局变量并在各种类中使用它 --divHeight: 100px; .div1 { height: calc(var(--divHeight) + 10px); width: 100px; background-color: red; } .div2 { height: calc(var(--divHeight) - 10px); background-color: red; } 我试过了，但没用。有办法吗？我之所以需要这样

在CSS3中有没有办法创建一个全局变量并在各种类中使用它

--divHeight: 100px;
.div1 {
    height: calc(var(--divHeight) + 10px);
    width: 100px;
    background-color: red;
}
.div2 {
    height: calc(var(--divHeight) - 10px);
    background-color: red;
}

我试过了，但没用。有办法吗？我之所以需要这样做，是因为我经常需要设计有标题和内容部分的页面。标题具有固定高度，内容部分应占据剩余高度。比如说

<!DOCTYPE html>
<html>
  <head>
    <style>
       .header {
         height: 70px;
         background-color: red;
       }
       .content {
         height: calc(100vh - 70px);
         background-color: green;
       }
     </style>
   </head>
   <body>
      <div class="header">
        Hello
      </div>
      <div class="content">
        Hello
      </div>
  </body>
</html>


.标题{
高度：70像素；
背景色：红色；
}
.内容{
高度：计算（100vh-70px）；
背景颜色：绿色；
}
你好
你好

因此，在将来，如果标题的高度必须更改为

100px

，则内容部分的高度也必须更改

我知道我们可以通过JavaScript实现这一点，但我想知道是否有纯CSS3方式。

这是可能的，只需在根元素上声明变量即可。事实上，一段时间以来，这一直是变量出现的唯一受支持的地方。您可以阅读更多关于变量的内容

：根目录{
--高度：100px；
}
.1分部{
高度：计算值（var（--divHeight）+10px）；
宽度：计算值（var（--divHeight）+10px）；
背景色：红色；
}
.第2分部{
高度：计算值（var（--divHeight）-10px）；
宽度：计算值（var（--divHeight）-10px）；
背景颜色：蓝色；
}