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

Question

所以我有一个正常的 960px 布局，我想添加一个可以在该 960 内使用 300px 的 div，并且我想用该 div 填充其余的空间（浏览器宽度）...但始终保持在该 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。无论视口大小是多少，深色容器内红色框的宽度始终为 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%;
}