creating a dynamic vertical percentage bar using css and javascript?

Question

I am trying to create a percentage bar in my ASP.net MVC to visually display some of the model's data.

I have successfully created the javascript part (albeit in a long winded way). However, I am having a slight issue with the 'visual display', as instead of placing the 'green section' within the div, instead it extends outside of it

(please see this js fiddle for better understanding).

The actual variables come from the Model (which works! :P), and so will not always be 64% (this value is represented by the width, which I believe is the correct height, it just appears below it (doesn't replace some of the red background).

I would like just a small bit of help/advise on how to make this 'bottom border' appear within the div, instead of extending it.

I think I am using the incorrect style or something, but reading from this SO question, I can't seem to find an alternative.

Any suggestions much appreciated.

Current CSS:

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

With 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

if your div is always going to be 500px, you could use something like:

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

and here's a demo of it in action.