如何仅用CSS根据<div>元素的高度改变其颜色？

嘿，这个需求完全可以用纯CSS实现！目前主流浏览器都支持的**CSS容器查询（Container Queries）**就能搞定，下面分两种常见场景给你具体方案：

场景1：基于父容器高度的20%阈值 #

如果你的“20%”是相对于父容器的高度（比如div高度占父容器的比例≤20%时变绿色），可以这么做：

HTML结构 #

<div class="parent-box">
  <div class="color-changing-div">我是会随高度变色的盒子</div>
</div>

CSS代码 #

/* 第一步：把父容器设置为容器查询的上下文 */
.parent-box {
  container-type: size; /* 开启基于容器宽高的查询能力 */
  height: 500px; /* 给父容器设置一个基准高度，可根据你的需求调整 */
  border: 1px solid #ddd;
}

/* 默认样式：当div高度超过父容器20%时显示蓝色 */
.color-changing-div {
  background-color: blue;
  color: #fff;
  padding: 1rem;
}

/* 容器查询规则：当div高度 ≤ 父容器高度的20%时，切换为绿色 */
@container (height <= 20%) {
  .color-changing-div {
    background-color: green;
  }
}

场景2：基于视口高度的20%阈值 #

如果你的“20%”是相对于浏览器窗口的高度（比如窗口高度≤20vh时div变绿色），用媒体查询更直接：

CSS代码 #

.color-changing-div {
  /* 默认：窗口高度超过20vh时显示蓝色 */
  background-color: blue;
  color: #fff;
  padding: 1rem;
}

/* 媒体查询：当视口高度 ≤ 20vh时切换为绿色 */
@media (max-height: 20vh) {
  .color-changing-div {
    background-color: green;
  }
}

补充说明 #

• 容器查询需要浏览器支持，目前Chrome、Firefox、Safari等现代浏览器都已经兼容，无需担心兼容性问题。
• 如果你的需求是基于div自身高度的比例（比如自身高度的20%作为阈值），纯CSS暂时做不到，因为CSS无法直接获取元素自身的尺寸比例来做条件判断，这种情况才需要JS辅助，但看你的描述应该是前者的场景。

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