如何使Div扩展宽度100%

时间:2014-09-10 16:50:33

标签: html css

我制作了一个容器并使其达到中间宽度边距:0自动,但我遇到了问题是我想让一些内容宽度适合宽度为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寻求帮助..

2 个答案:

答案 0 :(得分:0)

对于宽度为100%的窗口宽度

DEMO

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

  width:100vw;

box-sizing

enter image description here

完整代码:

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

答案 1 :(得分:0)

将内容div移到容器外部,然后从顶部给它绝对定位80px,使其落在标题的正下方。

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

Updated Pen