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

Question

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

我已经成功创建了 javascript 部分（尽管方法很冗长）。但是，我对“视觉显示”有一个小问题，因为不是将“绿色部分”放在 div 内，而是延伸到它之外

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

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

我想就如何使这个“下边框”出现在 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 正在运行。