html - 如何让div展开宽度100%

Question

我制作了一个容器并将其设置为中间宽度 margin: 0 auto，但我遇到了一个问题是我想让一些内容宽度适合 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

将内容 div 移到容器外，然后将其绝对定位为距顶部 80 像素，使其位于标题正下方。

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

Updated Pen