如何使容器中元素的宽度成为视口的宽度？

Question

有没有办法在这个jsfiddle中给出绿色条 - http://jsfiddle.net/gC72u/ - 视口的宽度？也就是说，我希望它延伸到容器外部并继续一直到视口的墙壁。但它仍然需要是容器的子容器。

由于

<div id="container">
    <div id="box"></div>
</div>

Answer 1

使用CSS（仅限）执行此操作的唯一方法是使用position: absolute;而不使用position: relative;作为父元素。

Demo

div#box {
    height:50px;
    width:100%;
    margin-top:50px;
    background-color: green;
    position: absolute;
    left: 0;
}

Answer 2

我不确定我喜欢这种百分比方法，但你总是可以有一个负的左边距和一个合适的宽度。例如：

div#box {
    margin-left: -50%;
    height:50px;
    width:200%;
    margin-top:50px;
    background-color: green;
}

免责声明：如果您有许多容器，我认为百分比不是一个好的范例。