垂直CSS条形图显示颠倒

Question

我正在尝试用CSS构建一个简单的垂直温度计。我从一个水平温度计中从左到右生成“水银”的教程中提取了一些示例代码。

现在我正在尝试制作一个垂直条，我怎样才能使“水银”从下到上生长？

它是这样的： 但是，我希望红色部分在灰色的底部对齐。

我尝试将top: 100%添加到#vertmeter-bar，这会在正确的位置启动红色部分。但是，为height提供负#vertmeter-bar属性似乎不起作用。

这是我的CSS：

#vertmeter
{
  height:350px;
  width:30px; 
  background-color:#D1D7DF;
}   
#vertmeter_bar
{
  background-color:#CF3500;
  width:100%;
}

HTML：

<div id="vertmeter">
<div id="vertmeter_bar" style="height:0%;">
</div>
</div>

用于动画转换的jquery片段：

$('#vertmeter_bar').animate({height:"10%"}, 1000, 'swing');

Answer 1

与你一起定位css将解决这个问题：

#vertmeter
{
  height:350px;
  width:30px; 
  background-color:#D1D7DF;
    position:relative
}   
#vertmeter_bar
{
  background-color:#CF3500;
  width:100%;
    bottom:0;
    position:absolute;
}

参见示例 - http://jsfiddle.net/ajthomascouk/wpPfd/

Answer 2

#vertmeter
{
  height:350px;
  width:30px; 
  background-color:#D1D7DF;
  position:relative;
}   
#vertmeter_bar
{
  background-color:#CF3500;
  width:100%;
  position:absolute;
  bottom:0;
}