如何使Div展開寬度爲100％

Question

我已經制作了一個容器並將其設置爲中間寬度邊距：0 auto，但是我遇到了一個問題，就是我想使某些內容寬度適合窗口寬度爲100％寬度？

有什麼辦法可以做到嗎？

如果我使用填充：0 400px和margn-left：-200？

這是我的工作代碼。

CSS

html, body {width:100%; height:100%; background:lightblue} 
* { margin:0; padding:0} 
#container { 
    width:1024px; 
    min-height:100%; 
    background:red; 
    margin:0 auto; 
    position:relative; 
} 

header { 
    width:100%; 
    height:80px; 
    background:skyblue; 
} 

header ul {list-style-type:none; float:right} 
header ul li {display:inline-block; padding: 10px; 20px;} 

#content { 
    width:100%; 
    height:200px; 
    background:yellow; 
    padding:0 300px; 
    margin-left:-200px; 
} 

http://codepen.io/jaminpie/pen/CHrIf

Thansk用於幫助..

Answer 1

對於具有100％的寬度窗口寬度

DEMO

使用1/100th of the width of the viewport.

width:100vw; 

和box-sizing

全碼：

* { box-sizing:border-box;margin:0; padding:0} 

html, body {width:100vw; height:100vh; background:lightblue} 

#container { 
    width:100%; 
    min-height:100%; 

    background:red; 
    margin:0 auto; 
    position:relative; 
} 

header { 
    width:100%; 
    height:80px; 
    background:skyblue; 
} 

header ul {list-style-type:none; float:right} 
header ul li {display:inline-block; padding: 10px; 20px;} 

#content { 
    width:100vw; 
    height:200px; 
    background:yellow; 
    padding:0 300px; 
    margin-left:-200px; 
} 

Answer 2

移動內容的div容器的外面，然後把它從頂部絕對定位80px以便它正好落在標題下方。

#content { 
    width:100%; 
    height:200px; 
    background:yellow; 
    padding:0 300px; 
    position:absolute; 
    top:80px; 
} 

Updated Pen