从底部开始的css元素大小为父级的百分比

Question

我正在尝试使用css制作垂直条形图，因此它看起来像这样：

但是我的代码却颠倒了。 CSS元素如何从底部对齐？

HTML：

#skill {  
  font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  height: 200px;
  position: relative;
  padding: 0px 0;
}

#skill div {
  margin-bottom: 0px;
  background: #e9e5e2;
  width: 1em;
  border-radius: 10px;
  height: 200px;
}

.bar {
  width: 1em;
  height: 200px;
  margin: 1px 2px;
  position: absolute;
  border-radius: 10px;
}

.severe {
  height: 25%;
  background-color: #f674a4;
}

.moderate {
  height: 50%;
  background-color: #f0bb4b;
}

.nrml {
  height: 100%;
  background-color: #a1ce5b;
}

CSS：

{{1}}

JSFiddle

Answer 1

您只需将bottom:0;添加到课程.severe即可。这是一个新的更新小提琴：https://jsfiddle.net/sebastianbrosch/yoqhkpwh/2/