是否可以在固定的高度比例上创建基于CSS的渐变？

如何解决是否可以在固定的高度比例上创建基于CSS的渐变？

我有一个div，它会以编程方式调整大小，并位于包装器div内。我希望（内部）div的背景颜色是渐变色，但渐变色基于包装div的高度。

例如，渐变可能类似于background: linear-gradient(0deg,green 0%,green 50%,yellow 80%,orange 90%,red 100%)

当内部div小于包装div高度的50％时，我希望它是完全绿色的，但是如果达到70％，则它将在顶部开始变黄，在80％时会变黄开始在顶部变成橙色，如果达到100％，则将具有完整的渐变。有关颜色方面我的意思的示例，请参见下面的codepen。

内部div将每隔十分之一秒左右调整大小，并且看起来类似于音频峰值计。

是否可以使用纯CSS来实现，还是需要使用JavaScript？如果我使用javascript，拥有一堆css类并根据百分比进行切换或直接为颜色上色会更好吗？

我可以用多个块来实现这一点，例如https://codepen.io/octod/pen/vPQLVo（不是我的），但理想情况下，我希望它是一个具有平滑渐变的连续颜色块。

我也可以通过保持内部div的高度并调整覆盖div的大小来实现它，但是不幸的是我的背景是透明的，所以这不是理想的选择。

编辑：根据要求，这是我目前无法使用的功能（当内部div不是全高时，它将显示全渐变）。我已经简化了它，并在此文章中加入了CSS。

真实代码段：（由Jojos先生编辑-这不代表我的代码，但是可接受的答案基于该版本，因此我将其保留为这样）

.outer {
  display: inline-block;
  height: 400px;
  width: 40px;
  background-color: dimgrey;
  padding: 5px;
  margin: 1em;
  }
.outer > div {
  width: 100%;
  }
  #inner50 {
  height: 50%;
  background: linear-gradient(0deg,red 100%);
  }
#inner70 {        /* please set the gradient values */
  height: 70%;
  background: linear-gradient(0deg,red 100%);
  }
#inner100 {       /* please set the gradient values */
  height: 100%;
  background: linear-gradient(0deg,red 100%);
  }

 
 <!-- result in case 50% --> 
 <div class="outer">  <div id="inner50"></div> </div>

 <!-- result in case 70% --> 
<div class="outer">  <div id="inner70"></div> </div>

 <!-- result in case 100% --> 
<div class="outer">  <div id="inner100"></div> </div>

JavaScript代码段：

// this function is called every 1/10th of a second
function updateMeter(newHeight) {
    getElementById("inner").style.height = newHeight+'px';
}

解决方法

只需将渐变大小固定为外部div的大小：

.outer {
  display: inline-block;
  height: 400px;
  width: 40px;
  background-color: dimgrey;
  padding: 5px;
  margin: 1em;
}

.outer>div {
  width: 100%;
  background: 
    linear-gradient(0deg,green 0%,green 50%,yellow 80%,orange 90%,red 100%) 
      top/ /* place it on the top */
      100% 400px; /* width=100% height=400px */
}

#inner50 {
  height: 50%;
}

#inner70 {
  height: 70%;
}

#inner100 {
  height: 100%;
}

<!-- result in case 50% -->
<div class="outer">
  <div id="inner50"></div>
</div>

<!-- result in case 70% -->
<div class="outer">
  <div id="inner70"></div>
</div>

<!-- result in case 100% -->
<div class="outer">
  <div id="inner100"></div>
</div>

也如下：

.outer {
  display: inline-flex;
  height: 400px;
  width: 40px;
  background-color: dimgrey;
  padding: 5px;
  margin: 1em;
}

.outer>div {
  width: 100%;
  margin-top:auto;
  background: 
    linear-gradient(0deg,red 100%) 
      bottom/ /* place it on the top */
      100% 400px; /* width=100% height=400px */
}

#inner50 {
  height: 50%;
}

#inner70 {
  height: 70%;
}

#inner100 {
  height: 100%;
}

<!-- result in case 50% -->
<div class="outer">
  <div id="inner50"></div>
</div>

<!-- result in case 70% -->
<div class="outer">
  <div id="inner70"></div>
</div>

<!-- result in case 100% -->
<div class="outer">
  <div id="inner100"></div>
</div>