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