使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附近额外包装。无论视口大小如何，黑色容器内红色框的宽度始终为300px。

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%; 
}