使div填充浏览器视口的其余部分

Question

所以我有一个普通的960px布局，我想添加一个可以在960内部使用300px的div和剩下的空间（浏览器宽度）我想填充那个div ...但总是保持不变包装内的位置（我不是在谈论垂直固定元素）

我可以在不使用javascript的情况下执行此操作吗？但如果theres不是另一种选择那么它

示例：

<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周围放置了一个额外的包装器。无论视口的大小如何，暗容器内的红色框的宽度始终为300px。

Answer 2

你可以使用margin-left：-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%;
}