html - 选择器填充可用空间之前的 CSS

Question

有没有办法让 before 选择器填充空闲空间的右侧并保持左侧不变？

我希望红线填充可用空间的右侧，可以实现吗？

.grey {
    border-left:1px solid #d1d1d1;
    background: #e0e0e0;
}

    .grey:before {
        content:'';
        width:100%;
        height:100%;
        background:red;
        position:absolute;
        z-index:-99;
    }

我正在使用 Bootstrap RC2。该类.grey被添加到一个col-4div 中。

我希望屏幕的左侧保持不变，但右侧填充“红色”颜色。颜色应该从col-4div 开始。

Answer 1

尝试使用 calc()

FIDDLE示例

.container:before{
    content: '';
    height: 100%;
    background: red;
    position: absolute;
    top:0;
    right: 0;
    width: calc(((100% - 1170px)/2));
}