Как сделать ширину элемента в контейнере шириной области просмотра?

Question

Есть ли способ дать зеленую полосу в этом jsfiddle - http://jsfiddle.net/gC72u/ - ширина окна просмотра? То есть, я хочу, чтобы он простирался за пределы его контейнера и продолжал путь до стен окна просмотра. Но он все равно должен быть дочерним элементом контейнера.

Благодаря

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

Answer 1

Я не уверен, что мне нравится процент подход, но вы всегда можете иметь отрицательный левый край и соответствующую ширину. Например:

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

Отказ от ответственности: Я не думаю, что проценты являются хорошей парадигмой, если у вас много контейнеров.

Answer 2

Единственным способом вы можете сделать это с помощью CSS (только) является использование position: absolute; без использования position: relative; для родительского элемента.

Demo

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