使用css和javascript创建动态垂直百分比栏？

Question

我正在尝试在ASP.net MVC中创建一个百分比栏，以便直观地显示一些模型的数据。

我已经成功创建了javascript部分（虽然以长篇大论的方式）。但是，我对“视觉显示”有轻微的问题，而不是放置“绿色”部分＆＃39;在div中，而不是在它之外延伸

（请参阅此js fiddle以获得更好的理解）。

实际变量来自模型（有效！：P），因此并不总是64%（此值由width表示，我相信是< / em>正确的高度，它只是出现在它下面（不会替换一些红色背景）。

我想提供一些关于如何制作这个“底部边框”的帮助/建议。出现在div中，而不是扩展它。

我认为我使用的是不正确的风格或其他内容，但是从这个SO question开始，我似乎无法找到替代方案。

任何建议都非常感谢。

当前的CSS：

div{
    width:200px;
    height:500px;
    border: 5px solid #808080;
    vertical-align:central; 
    text-align:center; 
    background-color: red;
} 

使用Javascript：

var percent = 64 //obtained from mode's data
var cap = 100 //obtained from model's data
    percent=(percent/cap)
var width = percent*500 //500 is height of div
alert("width is "+width +" cap is read as "+cap +" % is "+percent);
document.getElementById("myTank").style["border-bottom"]=width +"px solid green";
document.getElementById("myTank").innerText = percent +"%";

Answer 1

如果你的div总是500px，你可以使用类似的东西：

    document.getElementById("myTank").style["border-bottom"]=width +"px solid green";
    document.getElementById("myTank").style["height"]=500-width +"px";
    document.getElementById("myTank").innerText = percent*100 +"%";

这里有一个demo。