CSSとJavascriptの垂直配置問題

Question

私はCSSを全く知らないと言ってこれを序文にしておきます。私はCSSとJavascriptを使用してパフォーマンスバーを作成しようとしていますが、これまでバーの背景を作成してから、指定したパーセンテージまで塗りつぶすバーを作成しています。私の問題は、「内側のバー」が底部から上に上っていくのではなく上から下がってくることです。私は100からその割合を差し引いて絶対値をとることができますが、それは汚れたハックのようです。私はちょうど私がこれを一番下に整列させて、上から始まって成長するのではなく、高さが上がるにつれて "成長"する方法を見たいと思います。

CSSコード

.cssSmall .performanceBack 
{ 
    position: absolute; 
    z-index: 1; 
    height: 20px; 
    width: 18px; 
    top: 4px; 
    left: 81%; 
    background-color: Brown; 
} 

.cssSmall .performanceBar 
{ 
    font-size: 6px; 
    vertical-align: top; 
    background-color: Orange; 
} 

Javascriptコード

this.performanceBack = gDocument.createElement("performanceBack"); 
this.performanceBack.className = "performanceBack"; 

div.appendChild(this.performanceBack); 

this.performanceBar = document.createElement('div'); 
this.performanceBar.className = 'performanceBar'; 
//Hard coded value for testing 
this.performanceBar.style.height = '30%'; 
this.performanceBack.appendChild(this.performanceBar); 

感謝。すでにposition: absoluteに.performanceBackを設定しているので

Answer 1

私は.performanceBarのために同じことを行うが、それは.performanceBackの左下隅に固定になります0からbottomプロパティを設定します。

.cssSmall .performanceBar 
{ 
    font-size: 6px; 
    background-color: Orange; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
} 

あなたが一番下に垂直整列を変更してみましたhttp://jsfiddle.net/U5V2b