我制作了一个容器并使其达到中间宽度边距: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寻求帮助..
答案 0 :(得分:0)
对于宽度为100%的窗口宽度
使用1/100th of the width of the viewport.
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;
}
答案 1 :(得分:0)
将内容div移到容器外部,然后从顶部给它绝对定位80px,使其落在标题的正下方。
#content {
width:100%;
height:200px;
background:yellow;
padding:0 300px;
position:absolute;
top:80px;
}