如何使Div擴展寬度為100％

Question

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

有什么辦法嗎？

如果我使用padding：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

謝謝你的幫助

Answer 1

對於寬度為100％的窗口

演示

使用視口寬度的1/100。

  width:100vw;

和盒子大小

完整代碼：

* { 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;
}

更新筆