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, я бы сделал то же самое для .performanceBar, но установил бы свойство bottom на 0, что сделает его привязанным к нижнему левому углу .performanceBack.

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

Вы можете увидеть это в действии на http://jsfiddle.net/U5V2b