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

Question

所以我有一个正常的 960 像素布局，我想添加一个 div，它可以在 960 内使用 300 像素，其余空间（浏览器宽度）我想用那个 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%;
}