如何通过CSS获取元素当前高度？求纯CSS解决方案

核心限制 #

纯CSS无法直接读取元素的动态计算高度（比如由内容撑开的渲染后高度）。CSS是声明式样式语言，没有原生API可以访问元素自身的动态计算尺寸。

你尝试的attr(clientHeight)写法无效，原因是：CSS的attr()函数仅能读取HTML元素上写死的原生/自定义属性（比如data-*、class），完全无法识别DOM元素的clientHeight这类动态计算属性。

纯CSS下的可行替代方案 #

1. 静态高度场景：用CSS自定义属性预定义高度

如果元素高度是固定值，可以提前在HTML中定义自定义属性，再在CSS中调用计算：

<section style="background:red; --element-height: 60px;">q<br><br>q</section>

section {
  margin-top: calc(50vh - var(--element-height)/2);
  margin-bottom: calc(50vh - var(--element-height)/2);
}

这种方式需要提前知晓元素高度，仅适用于固定高度的场景。

2. 利用布局模块间接实现高度相关计算（非直接获取高度）

如果你的需求是基于元素高度完成布局（比如垂直居中），可以用CSS Grid或Flex让浏览器自动处理高度计算，但这不是“获取”高度值，而是浏览器帮你完成了布局逻辑：

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
section {
  background: red;
}

3. 容器查询：基于容器尺寸做条件样式（有限支持）

如果你的元素是一个容器，可以开启容器查询，基于容器的尺寸做样式调整，但这也只是基于容器高度做条件判断，而非直接获取高度值用于计算：

section {
  container-type: size;
}
@container (height > 100px) {
  /* 当section高度超过100px时应用的样式 */
}

注意：容器查询需要现代浏览器支持（Chrome 105+、Firefox 110+等）。

总结 #

如果必须直接获取元素的动态计算高度值并用于CSS计算，纯CSS无法实现，必须借助JavaScript读取clientHeight/offsetHeight后，将值注入到CSS变量中。但仅用CSS的话，只能在上述有限场景下完成类似需求。

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