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

Question

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

谢谢

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

Answer 1

使用 CSS(only) 执行此操作的唯一方法是position: absolute;不使用position: relative;父元素。

演示

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;
}

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