这里有一个position: absolute的例子，bottom: 0是保持它在底部的原因，然后你可以用@keyframes来改变高度。

.container {
  width: 400px;
  height: 350px;
  border-bottom: 2px solid black;
  
  position: relative;
}

.animated {
  width: 100px;
  height: 200px;
  border: 2px solid black;
  
 position: absolute;
 left: 50%;
 bottom: 0px;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 animation: grow 4s infinite;

}

@keyframes grow {
   0%   { height: 200px; }
   50%  { height: 0px; }
   100% { height: 200px; }
}

<div class="container">
  <div class="animated"></div>
</div>

*****EDIT****编辑下面的注解，以便您可以使用javascript设置css变量，然后使用该变量设置元素的高度，并使用相同的变量设置动画。

一个一个二个一个一个一个三个一个一个一个一个一个四个一个
你可以设置持续时间或任何相同的方式。

这是一个基本示例，说明如何对绝对定位的动画进行布局，以便底部保持固定在适当位置。
正如评论中提到的，重要的部分是bottom: 0（或者任何适合您情况的固定值）

/* A wrapper component, the only important part here is the position relative */
.wrapper {
  position: relative;
  height: 100px;
  width: 100px;
  border-bottom: 1px solid #000;
}

.animated {
  position: absolute;
  left: 10px;
  bottom: 0; /* This fixes the bar to the bottom of the wrapper element */
  width: 20px;
  height: 0;
  background-color: #f00;
  /* Some animation for demo purposes */
  animation-duration: 3s;
  animation-name: animate-height;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animate-height {
  from {
    height: 0px;
  }
  
  to {
    height: 100px;
  }
}

<div class="wrapper">
  <div class="animated"></div>
</div>