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);

謝謝。

Answer 1

既然您已經將.performanceBack設置到position: absolute我將對.performanceBack進行相同的.performanceBar但是將bottom屬性設置為0 ，這將使其錨定到.performanceBack 。

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

您可以在http://jsfiddle.net/U5V2b上看到它的運行情況