CSS3中能否创建全局变量并在calc中全局共享使用？

嘿，我来帮你搞定这两个问题——先是你遇到的CSS变量在calc()里不生效的坑，再给你几个不用改两处数值就能实现头部固定、内容区占满剩余高度的纯CSS方案！

一、先排查你的变量不生效原因 #

你写的calc(var(--divHeight) ±10px)大概率踩了两个常见坑：

1. calc语法必须留空格：+和-运算符前后必须有空格！比如calc(var(--divHeight) + 10px)是对的，而calc(var(--divHeight)+10px)会直接失效，浏览器识别不了这个表达式。
2. 变量作用域要搞对：如果你的--divHeight是定义在某个局部元素里，那只有它的子元素能访问到。全局用的变量最好定义在:root选择器下，这样整个文档的元素都能拿到：

:root {
  --divHeight: 100px; /* 全局变量，所有元素都能用 */
}

.div1 {
  height: calc(var(--divHeight) + 10px); /* 运算符前后留空格 */
}

.div2 {
  height: calc(var(--divHeight) - 10px);
}

二、实现头部固定、内容区占剩余高度的最优方案 #

你现在用calc(100vh - 70px)的问题是改头部高度就得同步改内容区的数值，太麻烦。用CSS变量+Flex/Grid布局就能完美解决，而且都是纯CSS，不用JS：

方案1：CSS变量 + calc（兼容旧浏览器）

只需要在全局定义头部高度变量，内容区直接用calc(100vh - var(--header-height))，改数值只需要动一处：

:root {
  --header-height: 70px; /* 只改这里就行！ */
}

body {
  margin: 0; /* 清除默认边距，避免滚动条 */
  min-height: 100vh; /* 让body占满整个视口高度 */
}

.header {
  height: var(--header-height);
  background: #f5f5f5;
}

.content {
  height: calc(100vh - var(--header-height));
  background: #e5e5e5;
  overflow-y: auto; /* 内容太多时可以滚动 */
}

方案2：Flex布局（更简洁，不用calc）

用Flex的flex-grow:1让内容区自动占满剩余空间，连calc都省了，而且如果后续头部高度动态变化（比如加了更多内容），它也能自动适配：

:root {
  --header-height: 70px;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column; /* 让元素垂直排列 */
}

.header {
  height: var(--header-height);
  background: #f5f5f5;
  flex-shrink: 0; /* 防止头部被内容区压缩 */
}

.content {
  flex-grow: 1; /* 自动占满剩余所有高度 */
  background: #e5e5e5;
  overflow-y: auto;
}

方案3：Grid布局（同样简洁，语义化更强）

Grid的grid-template-rows可以直接指定第一行高度，第二行用1fr占满剩余空间，代码更直观：

:root {
  --header-height: 70px;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: var(--header-height) 1fr; /* 第一行固定高度，第二行占剩余 */
}

.header {
  background: #f5f5f5;
}

.content {
  background: #e5e5e5;
  overflow-y: auto;
}

总结一下 #

• 变量失效的核心是calc运算符前后要留空格+变量作用域正确
• 头部和内容区的自适应方案里，Flex/Grid比calc更健壮，尤其是后续需求变化时，不用改calc里的数值
• 所有方案都是纯CSS实现，完全不需要JavaScript

内容的提问来源于stack exchange，提问作者Krishna Chaitanya