CSS高度百分比从下到上填充

Question

我有一个容器div，其中只有带边框的透明图像，请看一下：

我想稍后动态更改容器高度百分比，这样看起来就像正在填充图形。由于不喜欢它很有效，随着高度百分比的增加，颜色从上到下填充。是否有可能在＆＃34;喜欢＆＃34;以某种方式从下到上填写的案例？

这些是css相关值：

.like{
    width:150px;
    height:55%;
    margin-right:50px;
    float:right;
    border-radius:10px;
    background-color:#159C89;
}

.Dislike{
    width:150px;
    height:45%;
    background-color:#ff0000;
    margin-left:50px;
    float:left;
    border-radius:10px;
}

Answer 1

此示例可能会帮助您DEMO

<div class="battery yellow" data-max="60" data-fill="35">
  <div></div>
</div>
<div class="battery yellow" data-max="18" data-fill="9">
  <div></div>
</div>
<div class="battery green" data-max="5" data-fill="3">
  <div></div>
</div>

Answer 2

你可以用JS实现它 如果百分比为55％，剩余的空白将为45％ 所以你只需将45％作为margin-top设置为'.like'类！用JS。
当你应用margin-top时它会向下移动，这似乎是从底部填充!!