绝对定位和填充父高 - 是否可能？

Question

我正在尝试使用颜色条填充父高度，但它们绝对可以将它们放在右上角。那可能吗？ 如果标题是1或2行，它必须适应，因此条不能是固定的高度。
我该如何解决这个问题？

查看图片及此fiddle

颜色列的Css :(参见fiddle中的其余css）

.header .colorColumn {
    width: 18px;
    height: 70px;
    float: right;
}
.header .trackColors {
    position: absolute;
    right: 0;
    top: 0;
}

一个额外的问题：
如何使条形显示在文本后面但高于灰色背景？使用z-index很棘手，因为那时你需要两个层都是绝对定位的，但是在标题下面有任何代码都很难。

更新1：
颜色列计数是动态的 - 因此它可能包含5列 - 如何使其与之相关？

Answer 1

那样的？父母和身高的绝对位置：100％的彩条...

您可以：http://jsfiddle.net/StartStep/jj5b2gnq/5/

.programDetails .header {
    background-color: #404040;
    color: #e6e7e8;
    font-weight: bold;
    font-size: 22px;
    position: relative; /* As a reference point for absolute positioned bars */
}
.programDetails .titles {
    padding: 10px 36px 10px 20px;
}
.programDetails .header .sub {
    font-weight: normal;
    font-size: 14px;
}
.header .colorColumn {
    width: 18px;
    height: 100%; /* Fills the entire height */
    float: right;
}
.header .trackColors {
    position: absolute;
    right: 0;
    top: 0; bottom: 0  /* To stretch the element vertically */
}

用于填充的JS解决方案：http://jsfiddle.net/StartStep/jj5b2gnq/6/

$(document).ready(function() { //run as soon as possible
    var columnsWidth = $('.header .trackColors').width(); //get width of columns
    $('.programDetails .titles').css("padding-right", columnsWidth); //set the right padding-left
});

Answer 2

我可以一起建议采用不同的方法吗？在我看来，您正在向DOM（.colorColumn，.trackColors）添加元素，纯粹是为了样式。这被认为是不好的做法，因为标记和样式应该完全分开。

如果您只想添加两条彩色条纹，我建议您改用box-shadow。像这样：

header {
    color: #fff;
    background: #777;
    padding: 8px;
    box-shadow: 
        inset -10px 0 0 red,
        inset -20px 0 0 green;
}

还有很多方法可以做到这一点（gradients，伪元素:before和:after，border和outline的组合，。 ..），这只是我如何做到这一点的一个例子。只要你不必为它更改标记，这并不重要，只要你不必为它改变标记！

和一个演示： http://jsfiddle.net/y0jw9x17/

Answer 3

之前我遇到过同样的问题，我这样解决了问题：

用绝对位置填充父级：我使用％，高度：100％;

我不使用float：right;它让我很头疼，把东西放在右边我使用text-align：right;