javascript - 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 查看它的运行情况