сделать div заполнить остальную часть окна просмотра браузера

Question

так что у меня нормальный макет 960px, я хочу добавить div, который может использовать 300px внутри этого 960, а остальное пространство (ширина браузера) я хочу заполнить этим div ... но всегда оставаться на том же положение внутри обертки (я не говорю о вертикальном неподвижном элементе)

Могу ли я сделать это без использования JavaScript? но если нет другого варианта, то все в порядке

Пример:

<div class="wrapper">
    <div class="fill">Something</div>
</div>

CSS:

.wrapper {
    margin: 0 auto;
    width: 960px;
    background: #ddd;
}
.fill {
    margin: 300px 0 0 0;
    width: 300px;
    background: red;    
}

спасибо

Answer 1

Если я хорошо понял, что вам нужно: попробуйте эту скрипку

http://jsfiddle.net/jGmcV/show/
http://jsfiddle.net/jGmcV/ (источник)

это должен быть эффект, но я поместил дополнительную обертку вокруг вашего wrapper. Ширина красной рамки внутри темного контейнера всегда составляет 300 пикселей независимо от размера области просмотра.

Answer 2

Вы можете использовать поле слева: -10%;и маржа справа: -10%;Если я правильно понял.

или вы можете

.wrapper {
    margin: 0 auto;
    width: 960px;
    background: #ddd;
    position:relative;
}
.fill {
    margin: 300px 0 0 0;
    width: 300px;
    background: red;    
    position:absolute;
    top:0px;
    left:-10%;
}